在React當中，當你更新組件的state，然后新的state就會重新渲染到頁面中。在這個時候不需要你操作任何DOM。你也可以認為組件在React當中是一個狀態機（State Machines）。當用戶進行操作時會實現不同的狀態，然后再渲染到你的頁面中，讓你的頁面與數據始終保持一致。
如何定義State
定義一個合適的State，是正確創建組件的第一步。State必須能代表一個組件UI呈現的完整狀態集，即組件的任何UI改變，都可以從State的變化中反映出來；同時，State還必須是代表一個組件UI呈現的最小狀態集，即State中的所有狀態都是用于反映組件UI的變化，沒有任何多余的狀態，也不需要通過其他狀態計算而來的中間狀態。
組件中用到的一個變量是不是應該作為組件State，可以通過下面的4條依據進行判斷：
1.這個變量是否是通過Props從父組件中獲取？如果是，那么它不是一個狀態。
2.這個變量是否在組件的整個生命周期中都保持不變？如果是，那么它不是一個狀態。
3.這個變量是否可以通過其他狀態（State）或者屬性(Props)計算得到？如果是，那么它不是一個狀態。
4.這個變量是否在組件的render方法中使用？如果不是，那么它不是一個狀態。這種情況下，這個變量更適合定義為組件的一個普通屬性，例如組件中用到的定時器，就應該直接定義為this.timer，而不是this.state.timer。
如果對狀態不好理解的朋友，你可以認為狀態即是數據！
State 與 Props 區別
props 是組件對外的接口，state 是組件對內的接口。組件內可以引用其他組件，組件之間的引用形成了一個樹狀結構（組件樹），如果下層組件需要使用上層組件的數據或方法，上層組件就可以通過下層組件的props屬性進行傳遞，因此props是組件對外的接口。組件除了使用上層組件傳遞的數據外，自身也可能需要維護管理數據，這就是組件對內的接口state。根據對外接口props 和對內接口state，組件計算出對應界面的UI。
主要區別：
現在我們先來通過ES6類React.Component完成一個通過點擊按鈕對DIV進行顯示與隱藏的操作，效果如下：
咱們先將頁面進行初始化：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #myDiv{ width:200px; height:400px; background:red; color:yellow; border:1px solid green; } </style> <script src="https://zhangpeiyue.com/wp-content/uploads/2018/08/react.development.js"></script> <script src="https://zhangpeiyue.com/wp-content/uploads/2018/08/react-dom.development.js"></script> <script src="https://zhangpeiyue.com/wp-content/uploads/2018/08/babel.min_.js"></script></head><body> <div id="wrap"></div></body><script type="text/babel"> class MyComponent extends React.Component{ constructor(props){ super(props); // 為當前狀態添加isShow屬性 this.state={ // 值為true顯示，false為隱藏。默認值為true。 isShow:true } } render(){ //返回組件的初始內容 return <div> <input type="button" value="顯示與隱藏"/> <div id="myDiv">我在這里呀！</div> </div> } } ReactDOM.render( <MyComponent/>, document.querySelector("#wrap") )</script></html>到目前為止，頁面已經初始化完畢了。在上面的代碼中為state添加了一個默認值為true的屬性isShow。isShow用來控制div的顯示與隱藏！當isShow為true時顯示，為false時隱藏
接下來要完成的二件事。
第一件事是要為按鈕增加一個點擊事件，事件與changeState方法進行綁定。當點擊按鈕時改變isShow的狀態，也就是要為 isShow進行取反操作。
注意：
1、onClick中的c要大寫。
2、onClick后跟的方法不要用引號包裹，而是用{}
3、在ES6的class中React是不會自動綁定this的，所以需要自己通過bind綁定。
4、changeState方法中，不能直接修改isShow的值，而是需要借助setState方法來進行設置。
第二件事是要為id為myDiv的DIV增加一個style屬性，該屬性要根據isShow的狀態來對DIV進行顯示與隱藏
注意：
1、style的值不要用雙引號，而是用{}，否則會報錯
最終版代碼：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #myDiv{ width:200px; height:400px; background:red; color:yellow; border:1px solid green; } </style> <script src="https://zhangpeiyue.com/wp-content/uploads/2018/08/react.development.js"></script> <script src="https://zhangpeiyue.com/wp-content/uploads/2018/08/react-dom.development.js"></script> <script src="https://zhangpeiyue.com/wp-content/uploads/2018/08/babel.min_.js"></script></head><body><div id="wrap"></div></body><script type="text/babel"> class MyComponent extends React.Component{ constructor(props){ super(props); // 為當前狀態添加isShow屬性 this.state={ // 值為true顯示，false為隱藏。默認值為true。 isShow:true } } changeState(){ //此處不能直接修改isShow的值。而是需要借助setState方法！ this.setState({ //取反操作 isShow:!this.state.isShow }); } render(){ //返回組件的初始內容 return <div> {/*在ES6的class中React是不會自動綁定this的，所以需要自己綁定*/} <input type="button" value="顯示與隱藏" onClick={this.changeState.bind(this)} /> <div id="myDiv" style={{display:this.state.isShow?'block':'none'}}> 我在這里呀！ </div> </div> } } ReactDOM.render( <MyComponent/>, document.querySelector("#wrap") )</script></html>由上面的示例可以發現，當你改變isShow的狀態時，div也會發生相對應的變化！
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
