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

最新推荐文章于 2025-03-14 18:06:50 发布

NoTelecom

最新推荐文章于 2025-03-14 18:06:50 发布

阅读量398

点赞数 1

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

本文链接：https://blog.youkuaiyun.com/yuanfangyoushan/article/details/105618776

版权

react 专栏收录该内容

9 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

生命周期（新）

在这里插入图片描述

初始化阶段

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;	
};

（componentWillReceiveProps(nextProps )❌17.0 版本将会删除）

shouldComponentUpdate(nextProps,nextState)
- 通过比较nextProps，nextState及当前组件的this.props，this.state的状态用来判断是否需要重新渲染
- 默认返回true，需要重新render，返回false则不触发渲染。
- 可以用来优化组件性能
getSnapshotBeforeUpdate(prevProps, prevState)✅v16.4新增加的生命周期
- 作用是在真实 DOM 更新（componentDidUpdate）前，获取一些需要的信息（类似快照功能），然后作为参数传给 componentDidUpdate
- prevProps表示更新前的 props，prevState表示更新前的 state
- 返回值是一个快照（Snapshot），如果返回null就表示不生成快照，若有有效返回值，返回值会作为componentDidUpdate(prevProps, prevState)第三个参数
- ⚠️这个生命周期函数必须和componentDidUpdate(prevProps, prevState)同时使用，否则报错
- 这是一个例子🌰：

getSnapshotBeforeUpdate() {
    // 返回更新内容的高度 300px
    return this.wrapper.current.scrollHeight;
  }
componentDidUpdate(prevProps, prevState, prevScrollHeight) {
    this.wrapper.current.scrollTop =
      this.wrapper.current.scrollTop +
      (this.wrapper.current.scrollHeight - prevScrollHeight);
  }

（componentWillUpdate(nextProps,nextState)❌17.0 版本将会删除）

componentDidUpdate(prevProps, prevState)
- 可以操作组件更新的DOM，prevProps和prevState这两个参数指的是组件更新前的props和state
- 这个函数内要谨慎的使用setState,使用该钩子内setState有可能会触发重复渲染，需要自行判断，否则会进入死循环。下图就是无条件使用setState时产生的错误：
  
  在 componentDidMount 里面 setState 导致组件更新，组件更新后会执行 componentDidUpdate，此时你又在componentDidUpdate 里面 setState又会导致组件更新，造成成死循环了

卸载阶段

componentWillUnmount()

组件卸载前调用，经常用来执行一些清理操作，比如清理定时器，取消订阅等等来避免内存泄漏。

注意⚠️

新的生命周期函数不可以🚫和即将废弃的两个函数同时使用
getDerivedStateFromProps并不是只会在 props “改变”时才会调用。实际上只要父组件重新渲染时，这个生命周期函数就会重新调用，不管 props 有没有“变化”

下面是一个例子🌰：

import React, { Component } from 'react'

export default class LifeCycle extends Component {
     props = {age:10,name:'计数器'}
  static defaultProps = {
      name:'计数器'
  }
  constructor(props){
      //Must call super constructor in derived class before accessing 'this' or returning from derived constructor
    super();//this.props = props;
    this.state = {number:0,users:[]};//初始化默认的状态对象
    console.log('1. constructor 初始化 props and state');

  }  
  //componentDidMount在渲染过程中永远只有执行一次
  //一般是在componentDidMount执行副作用，进行异步操作
  componentDidMount(){
    console.log('3. componentDidMount 组件挂载完成');
    fetch('https://api.github.com/users').then(res=>res.json()).then(users=>{
        console.log(users);
        this.setState({users});
    });
  }
  shouldComponentUpdate(nextProps,nextState){
    console.log('Counter',nextProps,nextState);
    console.log('4. shouldComponentUpdate 询问组件是否需要更新');
    return true;
  }
  componentDidUpdate(prevProps, prevState)){
    console.log('5. componentDidUpdate 组件更新完毕');
  }
  add = ()=>{
      this.setState({number:this.state.number});
  };
  render() {
    console.log('2.render渲染，也就是挂载')
    return (

      <div style={{border:'5px solid red',padding:'5px'}}>
        <p>{this.props.name}:{this.state.number}</p>
        <button onClick={this.add}>+</button>
        <ul>
            {
                this.state.users.map(user=>(<li>{user.login}</li>))
            }
        </ul>
        {this.state.number%2==0&&<SubCounter number={this.state.number}/>}
      </div>

    )
  }
}