ReactJS入门2:组件状态

    React组件可以简单看做是包含props和states的函数。

    上一节总结了创建新组建和数据属性的传递。本节主要讲解组件的状态。

    React认为UI是不同状态的展现。在React中,开发者只需更新组件的状态,然后根据此新状态呈现新的UI。在呈现新的UI时,React具有局部更新的特点,即:React只渲染有变化的部分。在介绍组件状态之前,先了解一下React局部刷新的特点。

1.React的局部刷新

var HelloWorld = React.createClass({
  render: function() {
    return (
      <p>
        Hello, <input type="text" placeholder="Your name here" />!
        It is {this.props.date.toTimeString()}
      </p>
    );
  }
});
//每隔500毫秒渲染一次组件
setInterval(function() {
  ReactDOM.render(
    <HelloWorld date={new Date()} />,
    document.getElementById('content')
  );
}, 500);

      setInterval(function,time)方法用于设置计时器,作用是每隔time时间,会调用一次function。

     在文本字段中如入您的姓名后,React只会更改UI中的时间字符串,而不会将输入的名字刷新掉。即:React渲染组件时,只对UI中发生变动的地方进行局部刷新。

 

2.使用state的情况

       当需要响应用户输入、服务器请求或时间的推移时,需要为组件添加state,其它情况应保持组件的无状态。使尽可能多的组件处于无状态,这样可以将状态隔离到合理的位置,减少冗余,从而使代码更容易理解。(注意:局部刷新的例子中虽然有用户输入,但是并未作出响应,故没有添加state。)

 

3.为组件添加state

       状态应包含组件的事件处理程序可能更改的数据,以触发UI更新。

var LikeButton = React.createClass({
  getInitialState: function() {
    return {liked: false};
  },
  handleClick: function(event) {
    this.setState({liked: !this.state.liked});
  },
  render: function() {
    var text = this.state.liked ;
    return (
      <p onClick={this.handleClick}>
        The state is {text}. Click to toggle.
      </p>
    );
  }
});

ReactDOM.render(
  <LikeButton />,
  document.getElementById('content')
);

1.getInitialState() 用于定义初始状态。可以通过this.state获 取。
2.事件handleClick()用于修改组件的状态。this.setState()方法用来修改状态值。
3.在render()的内部根据这个状态作出相应。每次更新状态后,自动调用this.render()方法重新渲染组件。

触发事件前: 

         

触发事件后:

4.复合组件

        创建复合组件的目的:通过构建新组件分离不同的问题。

        针对复合组件,React定义了一种新的关系:从属关系(owner-ownee);owner指调用其它组件的组件,ownee指被调用的组件。区别于父子关系,从属关系是 React 特有的,而父子关系简单来讲就是DOM 里的标签的关系。

       注意:为了保持UI的一致性,ownee不能修改props的值,必须和owner设置的值一致。即:值的修改必须放在owner中。

//owner
var CommentBox = React.createClass({ render : function(){ return (<div> <p>I am a box.</p> <CommentList author={this.props.author} /> </div>); } }); //ownee var CommentList = React.createClass({ render : function(){ return (<div>The author is {this.props.author}.</div>); } }); ReactDOM.render( <CommentBox author='wei.hu' />, document.getElementById('content') );

 

5.组件策略

       常见的一种模式是“一个有状态的组件+多个无状态的组件”。有状态的组件封装了所有的交互逻辑,而无状态组件以声明的方式处理渲染数据。

 

  未完,待续。

  更多内容,请访问:http://www.cnblogs.com/BlueStarWei/       

posted @ 2017-04-01 10:41  blue星空  阅读(1536)  评论(0编辑  收藏  举报