React6—— react生命周期(新) + 例子

最新推荐文章于 2024-04-07 10:15:00 发布

NoTelecom

最新推荐文章于 2024-04-07 10:15:00 发布

阅读量345

点赞数 1

分类专栏： react 文章标签： reactjs

本文链接：https://blog.csdn.net/yuanfangyoushan/article/details/105618776

版权

本文详细介绍了React的新生命周期，包括初始化阶段、挂载阶段、更新阶段和卸载阶段的关键方法，如getDerivedStateFromProps、shouldComponentUpdate、getSnapshotBeforeUpdate和componentDidUpdate。并强调了这些方法在不同阶段的作用，如componentDidMount用于执行异步操作，getDerivedStateFromProps用于根据props更新state，以及在组件卸载时进行必要的清理操作以防止内存泄漏。同时，提醒开发者注意生命周期函数的使用规则和避免死循环的问题。

摘要由CSDN通过智能技术生成

生命周期（新）

在这里插入图片描述

初始化阶段

constructor()

类的默认方法，在类中是必须存在的，里边的super()方法是必须的，如果没有定义constructor()，会默认生成一个空的构造器constructor

挂载阶段

（componentWillMount() ->） render() -> componentDidMount()

（componentWillMount() ❌：组件挂载之前调用，很少使用， 17.0 版本将会删除）

render()：是组件中必须定义的，用来渲染DOM，并必须 return 一个React元素（描述组件，即UI）
componentDidMount(): 组件完成后调用，componentDidMount在渲染过程中永远只有执行一次，一般是在componentDidMount执行副作用，进行异步操作，并在异步请求中可以进行setState；也可以在这里使用refs，获取真实dom元素。

更新阶段

但凡state和props发生更新，不管是否改变，都会引起子组件重新render

static getDerivedStateFromProps(nextProps, prevState) -> shouldComponentUpdate(nextProps,nextState) -> getSnapshotBeforeUpdate(prevProps, prevState) -> componentDidUpdate(prevProps, prevState)

static getDerivedStateFromProps(nextProps, prevState)✅v16.4新增加的生命周期
- nextProps表示更新后的 props，prevState表示更新前的 state
- 根据nextProps和prevState计算出预期的状态改变，返回结果会被送给setState,也就是说我们可以根据props，state的变化情况来决定返回情况
- ⚠️这个生命周期函数是一个静态函数，因此是无法访问实例的属性和方法的（就不能使用this啦
- 返回值如果是object，就相当于是setState操作；如果是null或者其他基本类型，就不会更新state，没有返回值会报错
- 这是一个例子🌰：

static getDerivedStateFromProps(nextProps, state) {
   
  const param = nextProps.search.substring(1)
  if (param !== state.param) {
   
    return {
   
      param,
      loading: true
    }
  }
  return null;	
};