react开发教程（五）生命周期

在组件的整个生命周期中，随着该组件的props或者state发生改变，其DOM表现也会有相应的变化。一个组件就是一个状态机，对于特定地输入，它总返回一致的输出。

一个React组件的生命周期分为三个部分：实例化、存在期和销毁时。

实例化

当组件在客户端被实例化，第一次被建立时，如下方法依次被调用：

• getDefaultProps 设置属性的默认值。 es6对应 deftaultProps
• getInitialState 用来初始化每一个实例的state。 es6 对应 constructor函数中的this.state
• componentWillMount 渲染前
• render 渲染
• componentDidMount 渲染后

当组件在服务端被实例化，首次被建立时，如下方法依次被调用：

一、getDefaultProps
二、getInitialState
三、componentWillMount
四、render

componentDidMount 不会在服务端被渲染的过程当中调用。

getDefaultProps

对于每一个组件实例来说，这个方法只会调用一次，该组件类的全部后续应用，getDefaultPops 将不会再被调用，其返回的对象能够用于设置默认的 props(properties的缩写) 值。

getInitialState

对于组件的每一个实例来讲，这个方法的调用有且只有一次，用来初始化每一个实例的 state，在这个方法里，能够访问组件的 props。每个React组件都有本身的 state，其与 props 的区别在于 state只存在组件的内部，props 在全部实例中共享。

getInitialState 和 getDefaultPops 的调用是有区别的，getDefaultPops 是对于组件类来讲只调用一次，后续该类的应用都不会被调用，而 getInitialState 是对于每一个组件实例来说都会调用，而且只调一次。

每次修改 state，都会从新渲染组件，实例化后经过 state 更新组件，会依次调用下列方法：
一、shouldComponentUpdate
二、componentWillUpdate
三、render
四、componentDidUpdate

可是不要直接修改 this.state，要经过 this.setState 方法来修改。

componentWillMount

该方法在首次渲染以前调用，也是再 render 方法调用以前修改 state 的最后一次机会。

render
该方法会建立一个虚拟DOM，用来表示组件的输出。对于一个组件来说，render方法是惟一一个必需的方法。render方法须要知足下面几点：

• 只能经过 this.props 和 this.state 访问数据（不能修改）
• 能够返回 null,false 或者任何React组件
• 只能出现一个顶级组件，不能返回一组元素
• 不能改变组件的状态
• 不能修改DOM的输出

render方法返回的结果并非真正的DOM元素，而是一个虚拟的表现，相似于一个DOM tree的结构的对象。react之因此效率高，就是这个缘由。

componentDidMount

该方法不会在服务端被渲染的过程当中调用。该方法被调用时，已经渲染出真实的 DOM，能够在该方法中经过 this.refs 访问到真实的 DOM。

class App extends Component {
  static defaultProps = {
    name:"默认值"
  }

  constructor(props) {
    super(props);
    this.state = {
        num : 0
    };
    this.addNum = this.addNum.bind(this);
  }

  addNum(e) {
    e.preventDefault();
    var num = ++this.state.num;
    this.setState({
        num:num
    })
  }

  componentWillMount() {
    this.setState({
        num:10
    })
  }
  render() {

    return (
      <div className="App">
        <div className="App-header" ref="header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React{this.props.name}</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <button onClick={this.addNum}>{this.state.num}</button>
      </div>
    );
  }

  componentDidMount() {
    console.log(this.refs.header)
  }
}

须要注意的是，因为 this.refs.[refName] 属性获取的是真实 DOM ，因此必须等到虚拟 DOM 插入文档之后，才能使用这个属性，不然会报错。

存在期

此时组件已经渲染好而且用户能够与它进行交互，好比鼠标点击，手指点按，或者其它的一些事件，致使应用状态的改变，你将会看到下面的方法依次被调用

• componentWillReceiveProps props在父组件改变时执行
• shouldComponentUpdate 若是你肯定组件的 props 或者 state 的改变不须要从新渲染，能够经过在这个方法里经过返回 false 来阻止组件的从新渲染，返回 `false 则不会执行 render 以及后面的 componentWillUpdate，componentDidUpdate 方法
• componentWillUpdate 这个方法和 componentWillMount 相似，在组件接收到了新的 props 或者 state 即将进行从新渲染前，componentWillUpdate(object nextProps, object nextState) 会被调用，注意不要在此方面里再去更新 props 或者 state。
• render
• componentDidUpdate 这个方法和 <kdb>componentDidMount<／kdb> 相似，在组件从新被渲染以后，componentDidUpdate(object prevProps, object prevState) 会被调用。能够在这里访问并修改 DOM。

销毁时

componentWillUnmount

每当React使用完一个组件，这个组件必须从 DOM 中卸载后被销毁，此时 componentWillUnmout 会被执行，完成全部的清理和销毁工做，在 componentDidMount 中添加的任务都须要再该方法中撤销，如建立的定时器或事件监听器。

当再次装载组件时，如下方法会被依次调用：

一、getInitialState
二、componentWillMount
三、render
四、componentDidMount

createClass和ES6的不一样

ES6 class
static propTypes
static defaultProps
constructor (this.state)

对应createClass
propTypes
getDefaultProps
getInitialState

总体流程

ES6 class

static propTypes props值的类型检查 static defaultProps 设置属性的默认值
constructor ( this.state ) 初始化每一个实例的state

componentWillMount 该方法在首次渲染以前调用，也是再 render 方法调用以前修改 state 的最后一次机会。
componentDidMount 该方法被调用时，已经渲染出真实的 DOM，能够在该方法中经过 this.refs 访问到真实的
DOM。

componentWillUnmount 每当React使用完一个组件，这个组件必须从 DOM 中卸载后被销毁，此时会被执行
componentWillReceiveProps props在父组件改变时执行 shouldComponentUpdate
若是你肯定组件的 props 或者 state 的改变不须要从新渲染，能够经过在这个方法里经过返回 false 来阻止组件的从新渲染，返回
`false 则不会执行 render 以及后面的 componentWillUpdate，componentDidUpdate 方法

componentWillUpdate 这个方法和 componentWillMount 相似，在组件接收到了新的 props 或者
state 即将进行从新渲染前， componentDidUpdate 这个方法和
<kdb>componentDidMount<／kdb> 相似，在组件从新被渲染以后，会被调用。能够在这里访问并修改 DOM。 render
渲染组件

上一篇：react开发教程（四）React数据流
下一篇：react开发教程（六）React与DOM