何時使用狀態和何時使用道具？

Question

我正在研究反應的原理。

根據一些評論，有人說最好是保持你的組件無狀態，這是什麼意思？

但其他人說，如果你需要更新你的組件，那麼你應該學習如何設置你的狀態到適當的狀態。

我看到this.props/this.setProps和this.state/this.setState我對此感到困惑。

我想要的東西是，我怎麼能自己更新組件而不是從父組件？我應該在這種情況下使用道具或狀態嗎？

我已經閱讀了一些有關道具和狀態的文檔，我沒有清楚的是：什麼時候使用這個或另一個？

Answer 1

道具與狀態歸結爲「誰擁有這些數據？」

如果數據由一個組件管理，但另一個組件需要訪問該數據，則可以通過道具將數據從一個組件傳遞到另一個組件。

如果一個組件管理數據本身，它應該使用狀態和setState來管理它。

所以答案

哪能本身，而不是從父組件更新組件？我應該在這種情況下使用道具或狀態嗎？

是使用狀態。

道具應該被認爲是不可變的，並且永遠不會被改變通過突變。 setProps僅適用於頂層組件，通常不應使用。如果一個組件通過另一個組件傳遞一個屬性，並且第一個組件需要第二個組件可以更改它，那麼它應該也傳遞一個函數屬性，第二個組件可以調用該屬性來請求第一個組件更新其狀態。例如：

var ComponentA = React.createClass({ 
    getInitialState: function() { 
    return { count: 0 }; 
    }, 

    render: function() { 
    return <Clicker count={this.state.count} incrementCount={this.increment} />; 
    }, 

    increment: function() { 
    this.setState({count: this.state.count + 1}); 
    } 
}); 

// Notice that Clicker is stateless! It's only job is to 
// (1) render its `count` prop, and (2) call its 
// `incrementCount` prop when the button is clicked. 
var Clicker = React.createClass({ 
    render: function() { 
    // clicker knows nothing about *how* to update the count 
    // only that it got passed a function that will do it for it 
    return (
     <div> 
     Count: {this.props.count} 
     <button onClick={this.props.incrementCount}>+1</button> 
     </div> 
    ); 
    } 
}); 

（工作示例：https://jsbin.com/rakate/edit?html,js,output）

對於和麪向對象編程的比喻，認爲一類/對象：狀態將是你把類的屬性;該班級可以自由更新它認爲合適的內容。 道具會像方法的參數;你不應該改變傳遞給你的參數。

---

保持組件「無狀態」意味着它沒有任何狀態，並且它的所有渲染都基於它的道具。當然，必須有的地方，否則你的應用程序將不會做任何事情！所以這個指南基本上是說要保持儘可能多的組件無狀態，並且只在儘可能少的頂層組件中管理狀態。

保持組件無狀態使得它們更易於理解，重用和測試。

請參閱React文檔中的A brief interlude: props vs state以獲取更多信息。

Answer 2

當您知道變量值將影響視圖時使用狀態。這在反應中尤爲重要，因爲每當狀態變量發生變化時（儘管虛擬DOM對此進行了優化，您應該儘量減少它），，但是在更改道具時不可以（您可以強制這樣做，但並不是真的需要）。

您可以使用道具來保存所有其他變量，您認爲可以在組件創建過程中將其傳遞到組件中。

如果你想創建一個名爲MyDropdown多選下拉例如

state = { 
    show: true, 
    selected:[], 
    suggestions:this.props.suggestionArr.filter((i)=>{ 
     return this.state.suggestions.indexOf(i)<0; 
    }) 
} 

props={ 
    eventNamespace:'mydropdown', 
    prefix : 'm_', 
    suggestionArr:[], 
    onItemSelect:aCallbackFn 
} 

正如你所看到的，在狀態變量的對象會影響視圖某種方式或其他。 道具中的物體大多數應該在整個零部件生命週期中保持不變。所以這些對象可以是回調函數，用於命名空間事件或其他持有者的字符串。

所以，如果你想本身更新組件，你需要看看componentWillRecieveProps，componentWillUpdate，componentDidUpdate和componentShouldUpdate是如何工作的。或多或少，這取決於需求，您可以使用這些生命週期方法來確保渲染在組件內而不在父組件中。