React 生命周期

React 生命周期

生命周期图解

初始阶段

  1. 设置默认属性 (defaultProps), 设置属性类型 (propTypes)
  2. 初始化状态 (state = {})
  3. componentWillMount() -> 生命周期函数,在组件即将渲染前触发,可以做初始化数据显示。(注意:这个方法已经被标为不安全方法,官方不推荐使用)
  4. render() -> 触发了组件渲染
  5. componentDidMount() -> 此时的组件已经生成了DOM结构,可以进行有关操作。可以使用此方法替换componentWillMount

运行时

  1. componentWillReceiveProps() -> 当 props 发生变化的时候,也就是说父组件改变的时候会调用这个方法。但是注意的是,这个方法在初始化render的时候不会执行的
  2. shouldComponentUpdate() -> 组件接收到新属性时,或者组件状态改变时候出发组件更新,在组件初始化渲染的时候不会触发,这个函数可以做为优化组件性能的选择。在react 项目中更新一个组件可能需要其父组件更新,但是一个父组件下可能还会有别的子组件,一旦父组件更新了状态,那么所有子组件都要执行 render 方法,这样就太耗费性能了。所以可以使用 shouldComponentUpdate() 方法判断是否应该更新。其实你还可以通过继承 PureComponent 类,如果继承了这个类,那么在组件更新时候就会先去和之前的属性判断,从而判断是否应该更新
  3. componentWillUpdate() -> 组件即将被触发更新
  4. componentDidUpdate() -> 组件更新完成后生成新DOM

销毁阶段

  1. componentWillUnmount() -> 这是在组件被销毁时执行的方法。
    原文作者:JameHou
    原文地址: https://segmentfault.com/a/1190000017224044
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞