Reacts学习摘要3

Flux 

核心：

view：react组件，渲染页面，捕获用户事件，从Store中读取数据

stores：一个store管理一个区域的数据，数据变化是通知view

 Dispatcher：接收新数据并传递给store，store更新数据通知view

次级概念：

Actions：传递给Dispatcher的对象，包含新数据和Action Types

Action Types：store值更新特定的Actiontype的Action触发的数据

Action Creators：Action的创建者

Web Units

响应状态变化 Reactive State

给组件引入了可变的 state 。this.state 是组件私有的，可以通过调用 this.setState() 来改变它。当 state 更新之后，组件就会重新渲染自己。

render() 方法依赖于 this.props 和 this.state ，框架会确保渲染出来的 UI 界面总是与输入（ this.props 和 this.state ）保持一致。

var CommentBox = React.createClass({

  getInitialState: function() {

    return {data: []};

  },

  render: function() {

    return (

      <div className="commentBox">

        <h1>Comments</h1>

        <CommentList data={this.state.data} />

        <CommentForm />

      </div>

    );

  }

});

getInitialState方法 在组件生命周期中只执行一次，用于初始化State。

返回this.State对象。

更新State

this.setState({data:data})

var CommentBox = React.createClass({

  getInitialState: function() {

    return {data: []};

  },

//componentDidMount方法，是react组件渲染时自动调用的方法，动态更新界面的关键是this.setState();

  componentDidMount: function() {

    $.ajax({

      url: this.props.url,

      dataType: 'json',

      cache: false,

      success: function(data) {

        this.setState({data: data});

      }.bind(this),

      error: function(xhr, status, err) {

        console.error(this.props.url, status, err.toString());

      }.bind(this)

    });

  },