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.复合组件

　　　　

 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 );

View Code

　　　　这是React的官网案例

　　　从属关系:

　　　　　　Avatar拥有ProfilePic和ProfileLink的实例,拥有者就是给其它自口岸设置props的那个组件..更正式的说,若是　　　　

 　　　　　　组件Y在render()方法建立了组件X,那么Y就拥有X.

　　　　　　React 里，数据经过上面介绍过的 props 从拥有者流向归属者

　

 

 

 

 

 

 

 

 

　　　深刻理解React