react新的生命周期

一. react16当前生命周期

  • componentWillMount
    render前,所以setState不会重新渲染,服务端渲染唯一调用,推荐用constructor代替之
  • render
  • componentDidMount
    render后,调用setState会重新渲染,页面可交互,可以请求数据
  • componentWillRecieveProps(nextProps)
    已挂载组件接收到新props触发
  • shouldComponentUpdate(nextProps, nextState)
    在接收到新的props或state时是否重新渲染,默认返回true;首次渲染或forceUpdate时不会触发;
  • componentWillUpdate(nextProps, nextState)
    如果shouldComponentUpdate返回false,update相关的函数都不会触发;不要使用setState;
  • componentDidUpdate(nextProps, nextState)
  • componentWillUnmount
    卸载组件

二. 由于未来采用异步渲染机制,所以即将在17版本中去掉的生命周期钩子函数

  • componentWillMount
  • componentWillRecieveProps
  • componentWIllUpdate

三. 新增两个

  • static getDerivedStateFromProps
    会在初始化和update时触发,用于替换componentWillReceiveProps,可以用来控制 props 更新 state 的过程;它返回一个对象表示新的 state;如果不需要更新,返回 null 即可
  • getSnapshotBeforeUpdate
    用于替换 componentWillUpdate,该函数会在update后 DOM 更新前被调用,用于读取最新的 DOM 数据,返回值将作为 componentDidUpdate 的第三个参数

四. 建议用法

class A extends React.Component {
  // 用于初始化 state
  constructor() {}
  // 用于替换 `componentWillReceiveProps` ,该函数会在初始化和 `update` 时被调用
  // 因为该函数是静态函数,所以取不到 `this`
  // 如果需要对比 `prevProps` 需要单独在 `state` 中维护
  static getDerivedStateFromProps(nextProps, prevState) {}
  // 判断是否需要更新组件,多用于组件性能优化
  shouldComponentUpdate(nextProps, nextState) {}
  // 组件挂载后调用
  // 可以在该函数中进行请求或者订阅
  componentDidMount() {}
  // 用于获得最新的 DOM 数据
  getSnapshotBeforeUpdate() {}
  // 组件即将销毁
  // 可以在此处移除订阅,定时器等等
  componentWillUnmount() {}
  // 组件销毁后调用
  componentDidUnMount() {}
  // 组件更新后调用
  componentDidUpdate() {}
  // 渲染组件函数
  render() {}
  // 以下函数不建议使用
  UNSAFE_componentWillMount() {}
  UNSAFE_componentWillUpdate(nextProps, nextState) {}
  UNSAFE_componentWillReceiveProps(nextProps) {}
}

 

posted @ 2018-08-15 23:44  we are young  阅读(7120)  评论(0编辑  收藏  举报