React生命周期方法

发表于 |

两种能够用在 ES6类组件中的生命周期方法:constructor()和 render()

constructor（构造函数）只有在组件实例化并插入到 DOM 中的时候才会被调用。组件实例化的过程称作组件的挂载（mount）。

render() 方法也会在组件挂载的过程中被调用，同时当组件更新的时候也会被调用。每当组件的状态（state）或者属性（props）改变时，组件的 render() 方法都会被调用。

在组件挂载的过程中还有另外两个生命周期方法： componentWillMount() 和 componentDidMount() 。构造函数（constructor）最先执行， componentWillMount() 会在 render() 方法之前执行，而 componentDidMount() 在 render() 方法之后执行。

在挂载过程中有四个生命周期方法，它们的调用顺序是这样的：

1
2
3
4
- constructor()
- componentWillMount()
- render()
- componentDidMount()

但是当组件的状态或者属性改变的时候用来更新组件的生命周期,一共有5个生命周期方法用于组件更新，调用顺序如下：

1
2
3
4
5
6
- componentWillReceiveProps()
//只有在父组件向子组件传值时触发componentWillReceiveProps
- shouldComponentUpdate()
- componentWillUpdate()
- render()
- componentDidUpdate()

最后但同样重要的，组件卸载也有生命周期。它只有一个生命周期方法： componentWillUnmount() 。

了解每个生命周期方法的适用场景还是有帮助的：

  • constructor(props) - 它在组件初始化时被调用。在这个方法中，你可以设置初始化状态以及绑定类方法。

  • componentWillMount() - 它在 render() 方法之前被调用。这就是为什么它可以用作去设置组件内部的状态，因为它不会触发组件的再次渲染。但一般来说，还是推荐在 constructor() 中去初始化状态。

  • render() - 这个生命周期方法是必须有的，它返回作为组件输出的元素。这个方法应该是一个纯函数，因此不应该在这个方法中修改组件的状态。它把属性和状态作为输入并且返回（需要渲染的）元素

  • componentDidMount() - 它仅在组件挂载后执行一次。这是发起异步请求去 API 获取数据的绝佳时期。获取到的数据将被保存在内部组件的状态中然后在 render() 生命周期方法中展示出来。

  • componentWillReceiveProps(nextProps) - 父子组件传值时 ，这个方法在一个更新生命周（updatelifecycle）中被调用。新的属性会作为它的输入。因此你可以利用 this.props 来对比之后的属性和之前的属性，基于对比的结果去实现不同的行为。此外，你可以基于新的属性来设置组件的状态。

  • shouldComponentUpdate(nextProps, nextState) - 每次组件因为状态或者属性更改而更新时，它都会被调用。你将在成熟的 React 应用中使用它来进行性能优化。在一个更新生命周期中，组件及其子组件将根据该方法返回的布尔值来决定是否重新渲染。这样你可以阻止组件的渲染生命周期（render lifecycle）方法，避免不必要的渲染。

  • componentWillUpdate(nextProps, nextState) - 这个方法是 render() 执行之前的最后一个方法。你已经拥有下一个属性和状态，它们可以在这个方法中任由你处置。你可以利用这个方法在渲染之前进行最后的准备。注意在这个生命周期方法中你不能再触发 setState() 。如果你想基于新的属性计算状态，你必须利用componentWillReceiveProps() 。

  • componentDidUpdate(prevProps, prevState) - 这个方法在 render() 之后立即调用。你可以用它当成操作 DOM 或者执行更多异步请求的机会。

  • componentWillUnmount() - 它会在组件销毁之前被调用。你可以利用这个生命周期方法去执行任何清理任务。