react 生命周期

react 生命周期

概述

挂载：

• constructor()
• static getDerivedStateFromProps()
• render()
• componentDidMount()

更新：

• static getDerivedStateFromProps()
• shouldComponentUpdate()
• render()
• getSnapshotBeforeUpdate()
• componentDidUpdate()

卸载：

• componentWillUnmout()

错误处理：

• static getDerivedStateFromError()
• componentDidCatch()

删除

• componentWillMount
• componentWillReceiveProps
• componentWillUpdate

增加

• static getDerivedStateFromProps
• getSnapshotBeforeUpdate

render()

• 是class组件中唯一必须实现的方法
• 应该为纯函数
• 如果shouldComponentUpdate()返回false，则不会调用render()

返回值

• React元素，通常通过 JSX 创建
• 数组或者fragments,但数组不能包含对象（不过一般也不会单纯返回数组和对象，基本很少用到）
• Portals
• 字符串或数值类型，会被渲染成文本节点
• 布尔值或null，什么都不渲染

constructor()

• 会在首次挂载前执行
• 组件的构造函数，在其内部需要调用super(props)
• 不要在里面调用setState()方法
• 避免在构造函数中引入任何副作用或订阅

componentDidMount()

• 会在组件挂载后（插入 DOM 树中）立即调用
• 在这里调用setState()会触发额外渲染，但这渲染会发生在浏览器更新屏幕之前，所以即使调用了两次render(),但是只会发生一次屏幕更新

componentDidUpdate(prevProps, prevState, snapshot)

• 在屏幕更新后调用

componentWillUnmount()

• 会在组件卸载及销毁之前直接调用

shouldComponentUpdate(nextProps， nextState)

• 在render()之前调用
• 首次渲染或使用 forceUpdate() 时不会调用该方法。
• 返回 false 并不会阻止子组件的正常行为，比如说渲染

static getDerivedStateFromProps(nextProps, prevState)

getDerivedStateFromProps 存在只为了一个目的。它让组件在 props 发生改变时更新它自身的内部 state

用法

static getDerivedStateFromProps(nextProps, prevState) {
  const {type} = nextProps;
  // 当传入的type发生变化的时候，更新state
  if (type !== prevState.type) {
      return {
        type,
      };
  }
  // 否则，对于state不进行任何操作
  return null;
}

getSnapshotBeforeUpdate(prevProps, prevState)

• 在最近一次渲染输出（提交到 DOM 节点）之前调用，界面还没有更新，一般用作UI处理
• 此生命周期的任何返回值将作为参数传递给 componentDidUpdate()。

class Child extends Component {
  constructor(props) {
    super(props)
    this.state = {
      type: props.type,
      height: 250
    }
    this.listRef = createRef();
  }
  getSnapshotBeforeUpdate() {
    console.log(this.listRef.current.scrollHeight, 666)
    return null
  }
  componentDidUpdate() {
    console.log(this.listRef.current.scrollHeight, 777)
  }
  change = () => {
    this.setState({
      height: 500
    })
  }
  render() {
    console.log(this.state)
    return <div>
      <div ref={this.listRef} style={{height:this.state.height}}>{this.state.height}</div>
      <button onClick={this.change}>change</button>
    </div>
  }
}

static getDerivedStateFromError(error)

• 此生命周期会在后代组件抛出错误后被调用
• 它将抛出的错误作为参数，并返回一个值以更新 state
• 在渲染阶段调用，不允许出现副作用

componentDidCatch(error, info)

• 此生命周期在后代组件抛出错误后被调用
• 在“提交”阶段被调用，因此允许执行副作用。 它应该用于记录错误之类的情况