reactjs入門到實戰（四）---- state詳解

this.props 表示那些一旦定義，就不再改變的特性，而 this.state 是會隨着用戶互動而產生變化的特性。

組件免不了要與用戶互動，React 的一大創新，就是將組件看成是一個狀態機，一開始有一個初始狀態，然后用戶互動，導致狀態變化，從而觸發重新渲染 UI

組件其實是狀態機（State Machines）

React 把用戶界面當作簡單狀態機。把用戶界面想像成擁有不同狀態然后渲染這些狀態，可以輕松讓用戶界面和數據保持一致。

React 里，只需更新組件的 state，然后根據新的 state 重新渲染用戶界面（不要操作 DOM）。React 來決定如何最高效地更新 DOM。

State 工作原理

常用的通知 React 數據變化的方法是調用 setState(data, callback)。這個方法會合並（merge） data 到 this.state，並重新渲染組件。渲染完成后，調用可選的 callback回調。大部分情況下不需要提供 callback，因為 React 會負責把界面更新到最新狀態。

哪些組件應該有 State？

大部分組件的工作應該是從 props 里取數據並渲染出來。但是，有時需要對用戶輸入、服務器請求或者時間變化等作出響應，這時才需要使用 State。

** 嘗試把盡可能多的組件無狀態化。** 這樣做能隔離 state，把它放到最合理的地方，也能減少冗余，同時易於解釋程序運作過程。

常用的模式是創建多個只負責渲染數據的無狀態（stateless）組件，在它們的上層創建一個有狀態（stateful）組件並把它的狀態通過 props 傳給子級。這個有狀態的組件封裝了所有用戶的交互邏輯，而這些無狀態組件則負責聲明式地渲染數據。

哪些 應該 作為 State？

State 應該包括那些可能被組件的事件處理器改變並觸發用戶界面更新的數據。 真實的應用中這種數據一般都很小且能被 JSON 序列化。當創建一個狀態化的組件時，想象一下表示它的狀態最少需要哪些數據，並只把這些數據存入 this.state。在 render() 里再根據 state 來計算你需要的其它數據。你會發現以這種方式思考和開發程序最終往往是正確的，因為如果在 state 里添加冗余數據或計算所得數據，需要你經常手動保持數據同步，不能讓 React 來幫你處理。

哪些 不應該 作為 State？

this.state 應該僅包括能表示用戶界面狀態所需的最少數據。因此，它不應該包括：

• 計算所得數據： 不要擔心根據 state 來預先計算數據 —— 把所有的計算都放到render() 里更容易保證用戶界面和數據的一致性。例如，在 state 里有一個數組（listItems），我們要把數組長度渲染成字符串， 直接在 render() 里使用this.state.listItems.length + ' list items' 比把它放到 state 里好的多。
• React 組件： 在 render() 里使用當前 props 和 state 來創建它。
• 基於 props 的重復數據： 盡可能使用 props 來作為惟一數據來源。把 props 保存到 state 的一個有效的場景是需要知道它以前值的時候，因為未來的 props 可能會變化。
• 栗子：

• <div id="example"></div>
          <script type="text/babel">
              var Count = React.createClass({
                  getInitialState:function(){
                      return{
                          count:0
                      }
                  },
                  
                  handleClick:function(){
                      this.setState({count:this.state.count + 1});
                  },
                  
                  render:function(){
                      return (
                          <div>
                              <a    onClick={this.handleClick}>YOU have clicked {this.state.count} times</a>
                          </div>
                      );
                  }
                  
              });
              ReactDOM.render(
                  <Count />,
                  document.getElementById('example')
              )
          </script>