乐趣区

关于前端:react-生命周期

jiezi

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)

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