初探React之生命周期

初探React之生命周期

目录

参照官网教程学习后的总结

一、周期的分类

React的周期可分为三个阶段：

实例化
存在期
销毁&清理期

这三个阶段分别执行不同的任务。实例化是在React第一次生成真实的DOM时的周期，之后进入存在期。存在期React组件时时刻刻监听props 和 state的变化，当这两个属性发生变化时，组件重新render。清理期在组件从真实的DOM中移除时发生。

分别对应的函数是：

实例化

getDefaultProps

getInitialState

componenetWillMount

render

componenetDidMount

存在期

componenetWillReceiveProps

shouldComponenetUpdate

componenetWillUpdate

render

componentDidUpdate

销毁期

componentWillUnmount

每个阶段的事件依次发生。

二、组件的生命周期

组件的实例化

React首先通过createClass创建组件。这时候组件首先调用getDefaultProps函数（此函数在创建组件是调用，并不是挂载时调用），来设置自己的props属性。假如这个组件有父组件的话，父组件依然可以在渲染时，通过如下方式设置子组件的props（关于父组件在什么阶段传值还未完全弄清楚，这里存疑）。

...
render () {
    return (<div><childComponent property="1234" /></div>);
}
...

这个时候子组件可通过this.props.property来获取property的值1234。实际上在父组件给子组件传值的时候，一般采用这种方式。可以把这中方式看作一种“从上往下”的值传递方式。

之后调用getInitialState（Mounting之前调用），并且可通过this.state.data来获取state属性中的值。

...
getInitialState () {
    return {
        data: ...
        ...
    }
}
...

需要注意的是，getInitialState和getDefaultProps都只运行一次。之后将会进行第一次渲染。

componentWillMount在进行第一次渲染（即render）之前发生，可以通过这个函数做一些事情，比如从服务器获取JSON数据，再通过setState来改变state的值（虽然改变了state的值，但是组件只会进行一次渲染）。

同样的componentDidMount在第一次渲染发生之后运行。在这里可以运行一些操作。

存在期state和props的变化

说起存在期，不得不提到的两个属性就是state和props。porps用于父组件向子组件的传值，子组件会监听props的变化，假如值发生了变化，则判断是否需要重新渲染。通过这种方式，父组件可以修改传递的值，来诱使子组件进行重新渲染，从而保持数据的统一性，这就是一种“从上而下”的单向数据绑定。

这时候用于监听的两个函数是：

componentWillReceiveProps(nextProps) {...
shouldComponentUpdate(nextPorps, nextState) {...

componentWillReceiveProps在接受到新的props时调用，可以通过porps修改state的值。shouldComponentUpdate可以修改其返回值，使组件按照我们的想法来决定是否重新render，当函数返回true时需要重新渲染，此时调用componentWillUpdate函数。

componentWillUpdate(nextPorps, nextState) {...
render() {...
componentDidUpdate(prevPorps, prevState) {...

这些函数的功能和Mounting时差不多，不过Update函数会传入一些参数，同样可进行一些处理。

如果在组件在存在期通过setState改变了数据，也会触发组件的shouldComponentUpdate函数，从而触发组件进行重新渲染。和props不同的是setState需要组件自身来调用。

虽然setState只能通过组件自身调用，但是父组件将一个函数通过props传递给子组件，子组件可调用porps function来修改父组件的state，使父组件从新渲染，这是一种“从下而上”的方式。

父组件

...
render () {
    return (<div><childComponent handler={this.handler}></div>);
},
handler(changedValue) {
    this.setState({ data: changedValue， ...});
}
...

子组件

...
    this.props.handler(value);
...

组件的清除

componentWillUnmount函数在组件从DOM中移除时触发。可在这个函数中进行一些收尾工作。

componentWillUnmount() {...