useEffect 第二个参数的使用简介

from: https://react.dev/reference/react/useEffect

useEffect 是一个 React Hook，它允许你将组件与外部系统同步。
它第二个参数称为依赖项数组，它决定了 useEffect 副作用函数的执行时机，可以避免不必要的计算或副作用的触发。

作用

控制 useEffect 的触发条件：React 会根据依赖项数组中的值是否发生变化，决定是否重新执行 useEffect 中的副作用。

使用方式

1. 不传第二个参数：useEffect 每次渲染时都会执行。

   useEffect(() => {
    // 这个副作用在每次渲染时都会运行
    console.log('Component rendered');
   });

2. 传递空数组 []：useEffect 只在组件首次挂载和卸载时执行。相当于类组件中的componentDidMount 和 componentWillUnmount。

   useEffect(() => {
    console.log('Component mounted');
   
    return () => {
    console.log('Component unmounted');
    };
   }, []);

3. 传递包含依赖项的数组 [dep1, dep2, ...]：useEffect 只有当数组中的某个依赖项发生变化时，才会重新执行。相当于 componentDidUpdate，只针对指定的依赖项变化执行副作用。

   useEffect(() => {
    console.log(`Count has changed to ${count}`);
   }, [count]); // 只有 count 变化时才会执行
   

不同场景解释

• 每次渲染时执行：不传第二个参数，useEffect 每次组件渲染都会执行，不管状态或 props 有没有变化。一般这种情况较少使用，因为频繁的副作用可能会影响性能。

  useEffect(() => {
    console.log('Every render');
  });
  

• 仅在组件挂载和卸载时执行：传递空数组，useEffect 只会在组件第一次挂载时执行一次，以及组件卸载时执行清理函数。这是用于一次性的初始化或清理逻辑的常用模式。

  useEffect(() => {
    console.log('Only on mount');
    return () => {
      console.log('Cleanup on unmount');
    };
  }, []);

• 依赖项变化时执行：通过传入依赖项数组，useEffect 可以只在特定的状态或 props 发生变化时执行，这可以避免不必要的副作用执行，提升性能。

  useEffect(() => {
    console.log('Count changed');
  }, [count]); // 只有 count 变化时才会执行

小结

• 不传递第二个参数：每次渲染都会执行。
• 空数组 []：只在组件挂载时执行一次，并在卸载时执行清理函数。
• 有依赖项的数组 [dep1, dep2, ...]：只有当依赖项中的值发生变化时，useEffect 才会重新执行。