React中state與props介紹與比較

一.state

　　1.state的作用

　　　　state是React中組件的一個對象.React把用戶界面當做是狀態機,想象它有不同的狀態然后渲染這些狀態,可以輕松讓用戶界面與數據保持一致.

　　　　 React中,更新組件的state,會導致重新渲染用戶界面(不要操作DOM).簡單來說,就是用戶界面會隨着state變化而變化.

　　2.state工作原理

　　　　常用的通知React數據變化的方法是調用setState(data,callback).這個方法會合並data到this.state,並重新渲染組件.渲染完成后,調用可選的

　　　　callback回調.大部分情況不需要提供callback,因為React會負責吧界面更新到最新狀態.

　　3.那些組件應該有state?

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

　　　　組件應該盡可能的無狀態化,這樣能隔離state,把它放到最合理的地方(Redux做的就是這個事情?),也能減少冗余並易於解釋程序運作過程.

　　　　常用的模式就是創建多個只負責渲染數據的無狀態(stateless)組件,在他們的上層創建一個有狀態(stateful)組件並把它的狀態通過props

　　　　傳給子級.有狀態的組件封裝了所有的用戶交互邏輯,而這些無狀態組件只負責聲明式地渲染數據.

　　4.哪些應該作為state?

　　　　state應該包括那些可能被組件的事件處理器改變並觸發用戶界面更新的數據.這中數據一般很小且能被JSON序列化.當創建一個狀態化的組件

　　　　的時候,應該保持數據的精簡,然后存入this.state.在render()中在根據state來計算需要的其他數據.因為如果在state里添加冗余數據或計算

　　　　所得數據,經常需要手動保持數據同步.

　　5.那些不應該作為state?

　　　　this.state應該僅包括能表示用戶界面狀態所需要的最少數據.因此,不應該包括:

　　　　　　計算所得數據:

　　　　　　React組件:在render()里使用props和state來創建它.

　　　　　　基於props的重復數據:盡可能保持用props來做作為唯一的數據來源.把props保存到state中的有效的場景是需要知道它以前的值得時候,

　　　　　　因為未來的props可能會變化.

　　　React中文文檔

二.props

　　1.props的作用

　　　　　組件中的props是一種父級向子級傳遞數據的方式.

 　　2.復合組件

　　　　

var Avatar = React.createClass({
  render: function() {
    return (
      <div>
        <ProfilePic username={this.props.username} />
        <ProfileLink username={this.props.username} />
      </div>
    );
  }
});

var ProfilePic = React.createClass({
  render: function() {
    return (
      <img src={'http://graph.facebook.com/' + this.props.username + '/picture'} />
    );
  }
});

var ProfileLink = React.createClass({
  render: function() {
    return (
      <a href={'http://www.facebook.com/' + this.props.username}>
        {this.props.username}
      </a>
    );
  }
});

React.render(
  <Avatar username="pwh" />,
  document.getElementById('example')
);

　　　　這是React的官網案例

　　　從屬關系:

　　　　　　Avatar擁有ProfilePic和ProfileLink的實例,擁有者就是給其它自口岸設置props的那個組件..更正式的說,如果　　　　

 　　　　　　組件Y在render()方法創建了組件X,那么Y就擁有X.

　　　　　　React 里，數據通過上面介紹過的 props 從擁有者流向歸屬者

　

 

 

 

 

 

 

 

 

　　　深入理解React