react 学习笔记（一）

为什么要学习react, 作为一个前端开发人员（掌握vue)，我觉得是不够得，想更多的去拓展

学习这个东西讲究循序渐进，组件深入，不可能一步到位。好了，学习react打算首先从react的生命周期入手；
先看一张图

react 生命周期

上面这张图展示了react的一个生命周期的过程，一个react组件生命周期分为三部分： 实例化，存在期，销毁时。

实列化时期

客户端实例化， 会依次调用下列的方法：
1、getDefaultProps
2、getInitialState
3、componentWillMount
4、render
5、componentDidMount

服务端实例化，会依次调用这些方法
1、getDefaultProps
2、getInitialState
3、componentWillMount
4、render

• getDefaultProps
  这个方法只会调用一次，返回的对象可以用于设置默认的 props(properties的缩写) 值。

var Hello = React.creatClass({
    getDefaultProps: function(){
        return {
            name: 'pomy',
            git: 'dwqs'
        }
    },
    
    render: function(){
        return (
            <div>Hello,{this.props.name},git username is {this.props.dwqs}</div>
        )
    }
});

ReactDOM.render(<Hello />, document.body);

• getInitialState (废弃）React在ES6的实现中去掉了getInitialState这个hook函数，规定state在constructor中实现
  这个方法调用有且只有一次， 用来初始化每个实例的state
  小tips: 每次修改state， 都会一次依次调用下列方法：
  1、shouldComponentUpdate
  2、componentWillUpdate
  3、render
  4、componentDidUpdate

• componentWillMount
  这个方法是在DOM渲染之前调用， 在render之前调用

• render
  这个方法用于创建一个虚拟的DOM，render犯法是唯一一个必须的方法，特点：

  1. 只能通过this.props 和 this.state访问数据
  2. 可以放回null, false, 和任何组件
  3. 只能出现顶级节点（和vue类似）
  4. 不能改变组件状态
  5. 不能修改DOM输出
     render方法返回的结果并不是真正的DOM元素，而是一个虚拟的表现，类似于一个DOM tree的结构的对象。react之所以效率高，就是这个原因。

• componentDidMount
  这个方法被调用时，已经渲染出真实的DOM, 可以通过this.getDOMNode() 访问到真实的 DOM(推荐使用 ReactDOM.findDOMNode())。

存在期

这个时期就是组件已经渲染好，可以与之进行交互
依次有下面几个方法被调用
1、componentWillReceiveProps
2、shouldComponentUpdate
3、componentWillUpdate
4、render
5、componentDidUpdate

• componentWillReceiveProps
  组件的props属性可以通过父组件来更改， 这个时候，componentWillReceive就会被调用，可以在这个方法中更新state,以触发组件的更新

• shouldCompomentUpdate
  如果确定组件中的props或者state的改变不需要重新渲染，可以通过这个方法放回false来阻止组件渲染，返回false则不回执行render以及后面的componetWillUpdate, componentDidUpdate方法。

• componentWillUpdate
  这个方法和 componentWillMount 类似，在组件接收到了新的 props 或者 state 即将进行重新渲染前，componentWillUpdate(object nextProps, object nextState) 会被调用，注意不要在此方面里再去更新 props 或者 state。

• componentDidUpdate
  这个方法和 componentDidMount 类似，在组件重新被渲染之后，componentDidUpdate(object prevProps, object prevState) 会被调用。可以在这里访问并修改 DOM。

销毁时

当使用完这个组件，这个组件就会从DOM中卸载，此时commpentWillUnMount会被执行，完成所有的销毁工作，在componentDidMount中添加的任务都需要再该方法中撤销，

参看文章