我知道stateless和statefull components在反應中的區別。我想知道使用stateless和statefull components的有效方式是什麼。在任何特定情況下使用這個優點是否有任何性能優勢何時在反應中使用無狀態組件

來源

2017-05-03 Vikas Sardana

我會建議你閱讀'無狀態功能組件'的stackoverflow文檔：http://stackoverflow.com/documentation/reactjs/6588/stateless-functional-components#t=201705031313055961133 –

除了@MayankShukla評論，這裏是另一篇文章您可能會發現有趣的 - 我剛纔寫的一篇文章：http://stackoverflow.com/questions/37170809/react-createclass-vs-es6-arrow-function/37170998#37170998。 – Chris

@Chris，真的很棒，我認爲你應該把它添加到DOC中，這樣它就可以輕鬆獲得:) –

您應該默認使用無狀態組件。由於它們不使用狀態，所以很容易判斷何時應該重新渲染組件，因爲如果它們的道具不變，它們將顯示相同的內容。

當您需要使用setState或需要使用生命週期掛鉤時，應該使用有狀態組件。

從理論上講，使用無狀態組件可能會帶來性能上的好處，因爲它們是純函數（或者應該是純函數），但我沒有任何硬編碼。

來源

2017-05-03 13:13:39

警告：由於無狀態組件本身可能是非純的（例如：呈現當前時間），或者它們呈現非純組件作爲孩子，目前還沒有辦法表明無狀態組件實際上是純粹的，即使它們的道具沒有改變，React也不得不重新渲染它們。理論上無狀態組件甚至可能比常規組件慢，但我也沒有任何硬數字。 – Brandon

規級料件

類組件（具有狀態）可以當你想存儲組件內的一些局部數據中。爲例如 -

import React from 'react' 

function handleInc (state, props) { 
    return { 
    count: state.count + 1 
    } 
} 

class App extends React.Component { 
    state = { 
    count: 0 
    } 

    handleClick =() => { 
    this.setState(handleInc); 
    } 

    render() { 
    return (
     <div> 
     <button onClick={this.handleClick}>Increase</button> 
     <p>{this.state.count}</p> 
     </div> 
    ); 
    } 
}

這些組件也稱爲智能容器或部件，因爲它們容納所有的邏輯用於修改基於狀態（終極版圖案）的UI。

功能組件或無狀態組件

功能組件沒有狀態或任何本地數據。這些組件可用於通過傳遞父組件中的道具來更新某些UI。

<Child data={this.state.count} />

功能組件都有自己的優勢，如：

他們很容易測試。
他們很容易理解。
性能
有關this關鍵字無後顧之憂。

如果還有什麼，請參閱this文章。

來源

2017-05-03 16:44:26

何時在反應中使用無狀態組件

回答

規級料件

功能組件或無狀態組件

相關問題