React 生命周期 - useEffect 介绍

在 React 中，useEffect 钩子可以被看作是函数组件中的一种副作用管理工具，它的行为可以模拟类组件中的不同生命周期方法。useEffect 的执行时机取决于其依赖项数组（第二个参数）的设置方式。

根据 useEffect 的使用方式，它可以对应以下几种类组件生命周期方法：

1、 componentDidMount（组件挂载）

当你传递一个空的依赖数组 [] 时，useEffect 相当于 componentDidMount，即只在组件首次挂载时运行。

useEffect(() => {
  // 只在组件首次挂载时运行
  console.log('Component mounted');
}, []); // 空数组作为依赖项

等效于类组件的：

componentDidMount() {
  console.log('Component mounted');
}

2、 componentDidUpdate（组件更新）

如果 useEffect 的依赖数组中包含某些特定的状态或 props，当这些值发生变化时，useEffect 会在组件更新时重新执行，相当于 componentDidUpdate。

useEffect(() => {
  // 只在组件首次挂载时运行
  console.log('Component mounted');
}, []); // 空数组作为依赖项

等效于类组件的：

componentDidUpdate(prevProps, prevState) {
  if (prevState.someState !== this.state.someState) {
    console.log('Component updated because "someState" changed');
  }
}

3、 componentWillUnmount（组件卸载）

useEffect 可以返回一个清理函数，这个清理函数在组件卸载时（或依赖项更新时）执行，相当于 componentWillUnmount。

useEffect(() => {
  console.log('Component mounted');

  return () => {
    console.log('Component will unmount');
  };
}, []); // 空数组，表示只在卸载时清理

等效于类组件的：
componentWillUnmount() {
console.log(‘Component will unmount’);
}

4、 componentDidMount + componentDidUpdate

如果不传递依赖数组，useEffect 会在每次组件渲染后执行，相当于同时模拟了 componentDidMount 和 componentDidUpdate。

useEffect(() => {
  console.log('Component mounted or updated');
});

等效于类组件的：

componentDidMount() {
  console.log('Component mounted');
}

componentDidUpdate() {
  console.log('Component updated');
}

5、React生命周期总结

React 17版本之前

React 17版本之后

在新的生命周期中，react弃用了componentWillMount、componentWillReceiveProps、componentWillUpdate这三个钩子，取而代之的是getDerivedStateFromProps,其实就是把那三个钩子的含义融入到了这一个钩子中，写法如下：

static getDerivedStateFromProps(props, state) {
 console.log('getDerivedStateFromProps---props, state:', props, state)
 // 如果return null 则依然以原来的规则更新state，否则会锁定更新state
 return null
 // return {a:11}
 }