深入探讨 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 应用。

参考

相关推荐
GISer_Jing2 小时前
React渲染相关内容——渲染流程API、Fragment、渲染相关底层API
javascript·react.js·ecmascript
山猪打不过家猪2 小时前
React(五)——useContecxt/Reducer/useCallback/useRef/React.memo/useMemo
前端·javascript·react.js
前端青山2 小时前
React事件处理机制详解
开发语言·前端·javascript·react.js
对卦卦上心2 小时前
React-useEffect的使用
前端·javascript·react.js
练习两年半的工程师2 小时前
React的基本知识:事件监听器、Props和State的区分、改变state的方法、使用回调函数改变state、使用三元运算符改变state
前端·javascript·react.js
啵咿傲2 小时前
在React中实践一些软件设计思想 ✅
前端·react.js·前端框架
河畔一角4 小时前
升级react@18.3.1后,把我坑惨了
前端·react.js·低代码
@大迁世界5 小时前
停止在 React 组件回调中使用箭头函数!
前端·javascript·react.js·前端框架·ecmascript
stonefisher9 小时前
深挖`React`里程碑之作`AutoStore`与`helux`的渊源
前端·react.js·前端框架
用户186995598120410 小时前
四、React 函数式组件及常用的hooks
react.js