React中state與props介紹與比較

時間 2019-11-13

標籤 react state props 介紹比較欄目 React 简体版

原文原文鏈接

一.state

　　1.state的做用css

　　　　state是React中組件的一個對象.React把用戶界面當作是狀態機,想象它有不一樣的狀態而後渲染這些狀態,能夠輕鬆讓用戶界面與數據保持一致.html

　　　　 React中,更新組件的state,會致使從新渲染用戶界面(不要操做DOM).簡單來講,就是用戶界面會隨着state變化而變化.react

　　2.state工做原理服務器

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

　　　　callback回調.大部分狀況不須要提供callback,由於React會負責吧界面更新到最新狀態.ide

　　3.那些組件應該有state?ui

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

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

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

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

　　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.複合組件

 1 var Avatar = React.createClass({
 2   render: function() {
 3     return (
 4       <div>
 5         <ProfilePic username={this.props.username} />
 6         <ProfileLink username={this.props.username} />
 7       </div>
 8     );
 9   }
10 });
11 
12 var ProfilePic = React.createClass({
13   render: function() {
14     return (
15       <img src={'http://graph.facebook.com/' + this.props.username + '/picture'} />
16     );
17   }
18 });
19 
20 var ProfileLink = React.createClass({
21   render: function() {
22     return (
23       <a href={'http://www.facebook.com/' + this.props.username}>
24         {this.props.username}
25       </a>
26     );
27   }
28 });
29 
30 React.render(
31   <Avatar username="pwh" />,
32   document.getElementById('example')
33 );