深入探讨 React 组件生命周期(新版)

深入探讨 React 组件生命周期(新版)

React 18 引入了一些新的组件生命周期函数,以提供更灵活和强大的控制。在新的生命周期中,我们可以更好地处理组件的渲染、更新和卸载过程。下面我们将深入了解这些新的生命周期函数。

1. componentDidMount

在组件挂载到 DOM 后立即调用。这是执行初始化操作的好地方,例如数据获取、订阅事件等。

jsx 复制代码
componentDidMount() {
  console.log('Count---componentDidMount');
}

2. componentWillUnmount

在组件即将被卸载和销毁之前调用。可以执行一些清理工作,如取消订阅、清除计时器等。

jsx 复制代码
componentWillUnmount() {
  console.log('Count---componentWillUnmount');
}

3. shouldComponentUpdate

在组件更新之前调用,用于判断组件是否需要重新渲染。默认情况下,它返回 true

jsx 复制代码
shouldComponentUpdate() {
  console.log('Count---shouldComponentUpdate');
  return true;
}

4. componentDidUpdate

在组件更新后立即调用。可以在这里执行与更新相关的操作,并访问先前的 props、state 以及 getSnapshotBeforeUpdate 返回的快照值。

jsx 复制代码
componentDidUpdate(prevProps, prevState, snapshotValue) {
  console.log('Count---componentDidUpdate', { prevProps, prevState, snapshotValue });
}

5. getDerivedStateFromProps

在 render 之前调用,用于计算状态的派生状态。不太常用,因为它不允许直接访问组件实例。

jsx 复制代码
static getDerivedStateFromProps(props, state) {
  console.log('Count---getDerivedStateFromProps', { props, state });
  return null;
}

6. getSnapshotBeforeUpdate

在最近的一次渲染输出提交给 DOM 之前调用。返回值将作为 componentDidUpdate 的第三个参数。

jsx 复制代码
getSnapshotBeforeUpdate(prevProps, prevState) {
  console.log('Count---getSnapshotBeforeUpdate', { prevProps, prevState });
  return { name: 'Judith' };
}

举个例子

jsx 复制代码
class Count extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  componentDidMount() {
    console.log('Count---componentDidMount');
  }

  componentWillUnmount() {
    console.log('Count---componentWillUnmount');
  }

  shouldComponentUpdate() {
    console.log('Count---shouldComponentUpdate');
    return true;
  }

  componentDidUpdate(prevProps, prevState, snapshotValue) {
    console.log('Count---componentDidUpdate', { prevProps, prevState, snapshotValue });
  }

  // 若state的值在任何时候都取决于props,很少用到
  static getDerivedStateFromProps(props, state) {
    console.log('Count---getDerivedStateFromProps', { props, state });
    return null;
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log('Count---getSnapshotBeforeUpdate', { prevProps, prevState });
    return { name: 'Judith' };
  }

  add = () => {
    const { count } = this.state;
    this.setState({ count: count + 1 });
  }

  unmount = () => {
    ReactDOM.unmountComponentAtNode(document.getElementById('root'));
  }

  force = () => {
    this.forceUpdate();
  }

  render() {
    console.log('Count---render');
    const { count } = this.state;

    return (
      <div>
        当前值:{count} <br />
        <button onClick={this.add}>点击加1</button> <br />
        <button onClick={this.unmount}>卸载组件</button> <br />
        <button onClick={this.force}>不更新state,强制更新</button>
      </div>
    );
  }
}

通过深入了解 React 18 中引入的这些新的生命周期函数,我们能够更好地掌握组件的生命周期,实现更精细的控制和更高效的性能优化。在开发中,根据具体场景合理使用这些生命周期函数,将有助于构建更灵活、可维护的 React 应用。

参考

相关推荐
September_ning4 小时前
React.lazy() 懒加载
前端·react.js·前端框架
web行路人4 小时前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
番茄小酱0014 小时前
Expo|ReactNative 中实现扫描二维码功能
javascript·react native·react.js
Rattenking6 小时前
React 源码学习01 ---- React.Children.map 的实现与应用
javascript·学习·react.js
熊的猫7 小时前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
小牛itbull12 小时前
ReactPress:重塑内容管理的未来
react.js·github·reactpress
FinGet1 天前
那总结下来,react就是落后了
前端·react.js
王解1 天前
Jest项目实战(2): 项目开发与测试
前端·javascript·react.js·arcgis·typescript·单元测试
AIoT科技物语2 天前
免费,基于React + ECharts 国产开源 IoT 物联网 Web 可视化数据大屏
前端·物联网·react.js·开源·echarts
初遇你时动了情2 天前
react 18 react-router-dom V6 路由传参的几种方式
react.js·typescript·react-router