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)

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