React的生命周期
constructor(props)
它在组件初始化时被调用。在这个方法中,你可以设置初始化状态以及绑定类方法。
componentWillMount()
它在render()方法之前被调用。这就是为什么它可以用作去设置组件内部的状态,因为它不会触发组件的再次渲染。但一般来说,还是推荐在constructor()中去初始化状态。
render()
这个生命周期方法是必须有的,它返回作为组件输出的元素。这个方法应该是一个纯函数,因此不应该在这个方法中修改组件的状态。它把属性和状态作为输入并且返回(需要渲染的)元素
componentDidMount()
它仅在组件挂载后执行一次。这是发起异步请求去API获取数据的绝佳时期。获取到的数据将被保存在内部组件的状态中然后在render()生命周期方法中展示出来。
componentWillReceiveProps(nextProps)
这个方法在一个更新生命周(update lifecycle)中被调用。新的属性会作为它的输入。因此你可以利用this.props 来对比之后的属性和之前的属性,基于对比的结果去实现不同的行为。此外,你可以基于新的属性来设置组件的状态。
shouldComponentUpdate(nextProps, nextState)
每次组件因为状态或者属性更改而更新时,它都会被调用。你将在成熟的React 应用中使用它来进行性能优化。在一个更新生命周期中,组件及其子组件将根据该方法返回的布尔值来决定是否重新渲染。这样你可以阻止组件的渲染生命周期render lifecycle)方法,避免不必要的渲染。
componentWillUpdate(nextProps, nextState)
这个方法是render() 执行之前的最后一个方法。你已经拥有下一个属性和状态,它们可以在这个方法中任由你处置。你可以利用这个方法在渲染之前进行最后的准备。注意在这个生命周期方法中你不能再触发setState()。如果你想基于新的属性计算状态,你必须利用componentWillReceiveProps()。
componentDidUpdate(prevProps, prevState)
这个方法在render() 之后立即调用。你可以用它当成操作DOM 或者执行更多异步请求的机会。
componentWillUnmount()
它会在组件销毁之前被调用。你可以利用这个生命周期方法去执行任何清理任务。
挂载过程中有四个生命周期方法,调用顺序如下:
- constructor()
- componentWillMount()
- render()
- componentDidMount()
当组件更新时有五个生命周期方法,调用顺序如下:
- componentWillReceiveProps()
- shouldComponentUpdate()
- componentWillUpdate()
- render()
- componentDidUpdate()