react新增加的生命周期有哪些-前端问答-PHP中文网

react新增加的生命周期有哪些

青灯夜游

发布： 2022-03-21 18:28:22

原创

3191人浏览过

新增加的生命周期有：1、getDerivedStateFromProps，用来控制props更新state的过程；2、getSnapshotBeforeUpdate，用于读取最新的DOM数据；3、componendDidCatch。

react新增加的生命周期有哪些

本教程操作环境：Windows7系统、react17.0.1版、Dell G3电脑。

学习React，生命周期很重要，我们了解完生命周期的各个组件，对写高性能组件会有很大的帮助.

React 生命周期分为三种状态 1. 初始化 2.更新 3.销毁

React 17 新增生命周期

一、废除的生命周期

　　官网文档指出使用这些生命周期的代码会在未来版本的react中更容易产生bug，尤其是对于异步渲染的版本

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

　　componentWillMount

　　componentWillRecieveProps

　　componentWIllUpdate

二、新增的生命周期

getDerivedStateFromProps(nextProps, prevState)

用于替换componentWillReceiveProps，可以用来控制 props 更新 state 的过程；它返回一个对象表示新的 state；如果不需要更新，返回 null 即可

在每次渲染之前都会调用，不管初始挂载还是后面的更新都会调用，这一点和componentWillReceiveProps不同（只有当父组件造成重新渲染时才调用

iOS开发学习之iOS多线程和RunLoop 中文WORD版

iOS多线程编程对于iOS开发初学者来说，总是会觉得很难理解和掌握，现在通过几个实例来更加系统全面的理解iOS多线程编程，希望对大家有所帮助。有些程序是一条直线，起点到终点；有些程序是一个圆，不断循环，直到将它切断。直线的如简单的Hello World，运行打印完,它的生命周期便结束了，像昙花一现那样；圆如操作系统，一直运行直到你关机。一个运行着的程序就是一个进程或者叫做一个任务，一个进程至少包含一个线程，线程就是程序的执行流。Mac和iOS中的程序启动，创建好一个进程的同时，一个线程便开始运行，

查看详情

简单的理解就说从props中获取state，这个生命周期的功能实际上就是将传入的props映射到state上面

getDerivedStateFromProps是一个静态函数，也就是这个函数不能通过this访问到class的属性，也并不推荐直接访问属性。而是应该通过参数提供的nextProps以及prevState来进行判断，根据新传入的props来映射到state

如果props传入的内容不需要影响到你的state，那么就需要返回一个null，这个返回值是必须的，所以尽量将其写到函数的末尾

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

登录后复制

getSnapshotBeforeUpdate()

在最近的更改被提交到DOM元素前，使得组件可以在更改之前获得当前值，此生命周期返回的任意值都会传给componentDidUpdate()。

用于替换 componentWillUpdate，该函数会在update后 DOM 更新前被调用，用于读取最新的 DOM 数据，返回值将作为 componentDidUpdate 的第三个参数

在最新的渲染数据提交给DOM前会立即调用，它让你在组件的数据可能要改变之前获取他们

componendDidCatch(error, info)

如果一个组件定义了componentDidCatch生命周期，则他将成为一个错误边界(错误边界会捕捉渲染期间、在生命周期方法中和在它们之下整棵树的构造函数中的错误，

就像使用了try catch，不会将错误直接抛出了，保证应用的可用性)

三、基本使用

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() {}
}

登录后复制

【相关推荐：Redis视频教程】

以上就是react新增加的生命周期有哪些的详细内容，更多请关注php中文网其它相关文章！