React5生命周期

React 5 生命周期

生命周期简介

组件的生命周期分成三个状态：

Mounting：已插入真实 DOM

Updating：正在被重新渲染

Unmounting：已移出真实 DOM

React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。

componentWillMount()
componentDidMount() componentWillUpdate(object nextProps, object nextState) componentDidUpdate(object prevProps, object prevState) componentWillUnmount()

此外，React 还提供两种特殊状态的处理函数。

componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用
shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用

react生命周期流程

初始化， 首次render

getDefaultProps() 用来设置组件属性的默认值,在组件被建立时候就立即调用，所有实例都可以共享这些属性。

getInitialState() 用于定义初始状态,也不可以使用this.state和setState。

componentWillMount() 只在初始化时候被调用一次，可以使用setState方法，会立即更新state，然后接着进行render。

render() 特别注意此方法里面不可以使用setState。如果其中包含其他的子组件，那么子组件的生命周期才开始进行。

componentDidmount() 在子组件也都加载完毕后执行，在react中DOM渲染完成，此时才可以操作dom。（如果需要通过id，class选取dom时，在此方法里使用）。

componentWillReceiveProps(nextProps)

componentWillReceiveProps方法可以比较this.props和nextProps来看是否发生了变化，然后可以进行setState等操作。

注意只要父组件此方法触发，那么子组件也会触发，也就是说父组件更新，子组件也会跟着更新。

shouldComponentUpdate 方法在接收了新的props或state后触发，你可以通过返回true或false来控制后面的生命周期流程是否触发。

componentWillUpdate在props或state改变或shouldComponentUpdate返回true后触发。不可在其中使用setState。

重新渲染。

会等子组件也都更新完后才触发。

state发生改变时候更新

shouldComponentUpdate 方法在setState后state发生改变后触发，你可以通过返回true或false来控制后面的生命周期流程是否触发。

componentWillUpdate在state改变或shouldComponentUpdate返回true后触发。不可在其中使用setState。

重新渲染。

会等子组件也都更新完后才触发。

使用redux时候情况

在使用redux做状态管理时候，基本不需要透过生命周期去做setState这样的状态管理了，基本都是用props来传递来重新渲染，需要注意的仅仅是在哪个生命周期时候触发action，比如需要进行ajax请求时候一般都是在componentDidMount和componentWillReceiveProps时候进行，在reducer中处理完，然后在通过props传入组件执行组件的更新周期。