React （7 生命周期函数）_react 容器组件加载前-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_15034541/article/details/117361998

React 生命周期函数

在react中，生命周期函数指的是组件在加载前，加载后，以及组件更新数据和组件销毁时触发的一系列方法。

react组件从创建到销毁需要经历以下几个过程：在这里插入图片描述

首先是组件初始化阶段——（(initialization)）
在这个过程中组件的构造函数的数据已经初始化好了，如props、construtor、super

super(props)用来调用基类的构造方法( constructor() ), 也将父组件的props注入给子组件，功子组件读取(组件中props只读不可变，state可变)。
constructor()用来做一些组件的初始化工作，如定义this.state的初始内容。

接下来就是组件的挂在阶段
‘
这个阶段有componentWillMount、render、componentDidMount三个钩子函数。

componentWillMount：在组件挂在到dom前调用，只会被调用一次，在这里调用this.setstate不会引起组件重新渲染，平时很少使用。
render：根据组件的props和state（无两者的重传递和重赋值，论值是否有变化，都可以引起组件重新render），return 一个React元素（描述组件，即UI），不负责组件实际渲染工作，之后由React自身根据此元素去渲染出页面DOM。render是纯函数（Pure function：函数的返回结果只依赖于它的参数；函数执行过程里面没有副作用），不能在里面执行this.setState，会有改变组件状态的副作用。
componentDidMount：组件挂载到dom后调用，只会调用一次。

组件的更新阶段
这个阶段都是父组件重新render、父组件调用setstate数据变化、组件本身调用setsate等引发
此阶段分为componentWillReceiveProps，shouldComponentUpdate，componentWillUpdate，render，componentDidUpdate

**componentWillReceiveProps:**此方法只调用于props引起的组件更新过程中，响应 Props 变化之后进行更新的唯一方式，参数nextProps是父组件传给当前组件的新props。但父组件render方法的调用不能保证重传给当前组件的props是有变化的，所以在此方法中根据nextProps和this.props来查明重传的props是否改变，以及如果改变了要执行啥，比如根据新的props调用this.setState出发当前组件的重新render
**shouldComponentUpdate(nextProps, nextState)😗*此方法通过比较nextProps，nextState及当前组件的this.props，this.state，返回true时当前组件将继续执行更新过程，返回false则当前组件更新停止，以此可用来减少组件的不必要渲染，优化组件性能。
**componentWillUpdate(nextProps, nextState)😗*此方法在调用render方法前执行，在这边可执行一些组件更新发生前的工作，一般较少用。
render: render方法在上文讲过，这边只是重新调用。
componentDidUpdate(prevProps, prevState): 此方法在组件更新后被调用，可以操作组件更新的DOM，prevProps和prevState这两个参数指的是组件更新前的props和state

PS：组件的更新机制
setState()的两个作用

修改state
更新组件
过程：父组件重新渲染·时，也会重新渲染子组件，但只会渲染当前组件树

在这里插入图片描述
组件性能优化

减轻state：只存储跟组件渲染相关的数据
注意：不用做渲染的数据不要放在state中
对于那种需要在多个方法中用到的数据，应该放到this中

减少不必要的重新渲染
组件更新机制：父组件更新会引起子组件也被更新、
无论子组件数据是否发生变化，一旦父组件更新子组件也会随之更新，这样就会带来不必要的重新渲染。
解决方式：通过钩子函数shouldComponentUpdate（nextProps，netxState）解决。

案例：随机生成数字，显示在页面，如果生成的数字与当前显示的数字相同，那么就不需要更新UI，反
之更新UI。
利用nextState参数来判断当前组件是否需要更新


import React from 'react';
export default class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      namber: 0
    }
  }
  startRandomn () {
    this.setState({
      number: Math.floor(Math.random() * 3)
    })
  }
  render () {
    console.log('重新渲染了');
    return (
      <div>
        <span>随机数:{this.state.number}</span>
        <button onClick={this.startRandomn.bind(this)}>生成随机数</button>
      </div>
    )
  }
}

在这里插入图片描述
解决：


import React from 'react';
export default class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      namber: 0
    }
  }
  startRandomn () {
    this.setState({
      number: Math.floor(Math.random() * 3)
    })
  }
  // 解决代码
  shouldComponentUpdate (nextProps, nextState) {
    if (nextState.number !== this.state.number) {
      return true
    }
    return false
  }
  render () {
    console.log('重新渲染了');
    return (
      <div>
        <span>随机数:{this.state.number}</span>
        <button onClick={this.startRandomn.bind(this)}>生成随机数</button>
      </div>
    )
  }
}