react的生命周期

Posted 2020-12-16 moluxi

react的生命周期

生命周期图谱速查表

 

旧版本

• 初始化阶段 ———挂载时的阶段

  constructor(props)

  如果不初始化state或不进行方法绑定，则不需要React组件实现构造函数

  constructor (props) { //初始化state 或 进行方法绑定
      super (props)
      // 只能在构造函数中直接为 this.state 赋值。如需在其他方法中赋值，你应使用 this.setState() 替代。
      // 避免在构造函数中引入任何副作用或订阅 --- 异步操作 ，如果要使用，建议在componentDidMount中使用
      // 如果不初始化 state 或不进行方法绑定，则不需要为 React 组件实现构造函数
      this.state = {
          msg: ‘hello生命周期函数‘
      }
      console.log(‘construtor‘)
  }

  componentWillMount()

  16.3版本开始引入别名，提示在17版本时将废除此生命周期的钩子函数在挂在之前被调用。它在render()之前调用，因此方法中同步调用setStare()不会发生额外渲染。

  

  使用时会报以上警告

  

  render()

  render() 方法是 class 组件中唯一必须实现的方法。 render() 函数应该为纯函数，这意味着在不修改组件 state 的情况下，每次调用时都返回相同的结果，并且它不会直接与浏览器交互。 如需与浏览器进行交互，请在 componentDidMount() 或其他生命周期方法中执行你的操作(异步操作) 挂载时和更新时使用的都是同一个钩子函数

    render () {
      // class 组件中唯一必须实现的方法。
      // render() 函数应该为纯函数，这意味着在不修改组件 state 的情况下，每次调用时都返回相同的结果，并且它不会直接与浏览器交互。
      // 挂载时和更新时都会触发此函数
      console.log(‘render‘)
      return (
        <div>
          <h1>生命周期钩子函数</h1>
          <button onClick={ () => {
            this.setState({
              msg: ‘6666‘
            })
          }}>点击</button>
          { this.state.msg }
        </div>
      )
    }

  componentDidMount()

  组件挂载后（插入 DOM 树中）立即调用。 订阅数据+数据请求 + 实例化数据

   componentDidMount () {
      // 组件挂载后（插入 DOM 树中）立即调用。
      // 订阅数据 --- dataSource.subscribe()
      // 数据请求 --- axios()
      // 实例化   --- var swiper = new Swiper()
      // DOM操作 --- document.getElementById(‘‘).style.display = ‘‘
      // 修改状态 --- this.setState()
      console.log(‘componentDidMount‘)
    }

• 运行时阶段———更新时阶段

  当组件的 props 或 state 发生变化时会触发更新

  componentWillReceiveProps(nextProps) {} 如果使用过 新版的 的生命周期钩子函数之后，不能使用即将废弃的此函数

  componentWillReceiveProps (nextProps, nextContext) {
    //   // 运行时阶段 - 更新阶段 --- props 和 state 改变是触发 - 接收父组件传递过来的数据时触发，需要通过nextProps与this.props对比
    //   console.log(nextProps)
    // }

   

新版本

初始化阶段 ———挂载时的阶段

constructor(props): 如果不初始化 state 或不进行方法绑定，则不需要为 React 组件实现构造函数

**static getDerivedStateFromProps()**：

**render()**:render() 方法是 class 组件中唯一必须实现的方法。 render() 函数应该为纯函数，这意味着在不修改组件 state 的情况下，每次调用时都返回相同的结果，并且它不会直接与浏览器交互。 如需与浏览器进行交互，请在 componentDidMount() 或其他生命周期方法中执行你的操作(异步操作) 挂载时和更新时使用的都是同一个钩子函数

**componentDidMount()**:组件挂载后（插入 DOM 树中）立即调用。 订阅数据+数据请求 + 实例化数据

shouldCOmponentUpdate() : 提升react组件性能的关键，要不不写。要写必写返回值，如果返回为true，就回执行更新时函数，如果返回为false，不会更新 ，默认为true

运行时阶段———更新时阶段

当组件的 props 或 state 发生变化时会触发更新

static getDerivedStateFromProps()