react学习札记(一)

最近学习了一点react的知识，在此稍作小结记录。

首先，需要写一个react的class，写法为var Picture = React.createClass({});它的里边必须有render函数返回渲染的dom，但这时dom是虚拟的。

调用的方法有两种：

第一种ReactDOM.render(<Picture />,document.getElementById("content"));

第二种React.render(
    React.createElement(Picture , null),
    document.getElementById('content')
);

第一种方法需要在head里面加入<script src="../../build/react-dom.js"></script>，而第二种方法不用。

react里面有非常重要一个点：组件的生命周期，在另一个人写的博客里有比较详细的介绍：http://blog.csdn.net/lihongxun945/article/details/46334379，在官方的api中也有很多介绍：http://reactjs.cn/react/docs/component-specs.html。

组件不允许修改自己的 props，只能通过父组件来修改。这是为了保持props的一致性。如果有需要自行修改的值，应该存在 this.state 中！！！！

componentDidMount是在render之后才执行的函数，componentWillMount是在render之前执行的，若需要开始从其他地方用ajax获取数据的这两个都可以使用，componentDidMount在执行之后还会执行一次render函数。若想要再要不断从远程接收数据，则可以在componentDidMount中加入这一句setInterval(this.loadCommentsFromServer, this.props.pollInterval)，就可以不断接收数据。

貌似每执行一次class里面的内置的组件就会调用一次render。。。

另外，在用ajax传输数据的时候，需要用this.setstate({})，来改变state的值。但这个时候的this貌似并不是整个class的this，这时候就需要用bind(this)，才可以正常的赋值。

如类似下面的代码

$.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)
    });

手机访问入口：www.duckr.cn/web/banner/annualuserinfo/id?Telephone=xxxxxxxxx