陣營JS結合回調

我們怎樣才能切實證明這一點，每個渲染後的反應創造了新的回調Arrow功能所以它是一個不錯的辦法。請參見下面的代碼 -陣營JS結合回調

class DankButton extends React.Component { 
    render() { 
    // Bad Solution: An arrow function! 
    return <button onClick={() => this.handleClick()}>Click me!</button> 
    } 

    handleClick() { 
    this.logPhrase() 
    } 

    logPhrase() { 
    console.log('such gnawledge') 
    } 
}

此外，如何以下Arrow功能類屬性的功能真的有用？

class DankButton extends React.Component { 
    render() { 
    return <button onClick={this.handleClick}>Click me!</button> 
    } 

    // ES6 class property-arrow function! 
    handleClick =() => { 
    this.logPhrase(); 
    } 

    logPhrase() { 
    console.log('such gnawledge') 
    } 
}

來源

2017-09-25 Shubham

我不知道我明白你的

我們怎樣才能切實證明了這一點

正如我從你的問題理解的意思究竟是什麼，我認爲你請注意，在上面的第一個示例中，正在創建一個新的函數實例。
考慮到這一點，當你想想看，還有當你創建和傳遞的object或function一個新的實例是至少2個問題：也許在大多數情況下，不太重要的

，你消耗更多的內存每個渲染。
更重要的是（在我看來），您就有可能通過將新的道具上的每個渲染中斷反應的 Reconciliation and Diffing Algorithm，這會讓孩子組件的重新渲染，因此性能問題可能會出現。

來源

2017-09-25 18:01:46

如何檢查新實例是否實際創建。 – Shubham

對不起，我不遵循這個權利。哪一個是有效的？第一種或第二種方法？ –

@vamshi第一種方法不好，它的答案是每次都會創建新的回調實例。但是如何檢查每個渲染是否創建新實例？ – Shubham

箭頭函數類屬性函數真的有效。

對不起，在使用bind時不知道如何證明函數的新實例，但我可以做後者。

console.logthis在你的箭頭函數中，並將它與一個作爲常規函數完成的函數進行比較。任何時候都不要使用bind。箭頭函數的this將是組件的上下文，而基於function的將是window或undefined。

來源

2017-09-26 03:35:48 Andrew

陣營JS結合回調

回答

相關問題