前端面试题 - 60. useEffect的第二个参数

问题：

• useEffect的第二个参数, 传空数组和传依赖数组有什么区别?
• 如果return了一个函数, 传空数组的话是在什么时候执行? 传依赖数组的时候是在什么时候执行?

解答：

• useEffect的第二个参数是一个依赖数组，用于控制useEffect的执行时机。当依赖数组变化时，useEffect会重新执行。如果依赖数组为空，则useEffect只在组件挂载和卸载时执行一次。
• 当传空数组时，useEffect只在组件挂载和卸载时执行一次，这相当于类组件中的componentDidMount和componentWillUnmount生命周期函数。返回的函数会在组件卸载时执行。

当传依赖数组时，只有依赖数组中的变量发生改变时，useEffect才会重新执行。返回的函数会在下一次useEffect执行之前执行，即在组件重新渲染之前执行。

需要注意的是，传递依赖数组时，如果数组中包含了函数或对象等引用类型的变量，只要它们的引用地址没有发生改变，useEffect不会认为它们发生了变化，因此不会重新执行。

下面是一些示例代码，用于演示useEffect的不同用法：

import React, { useState, useEffect } from "react";
function Example() {
  const [count, setCount] = useState(0);
  // 传空数组，只在组件挂载和卸载时执行
  useEffect(() => {
    console.log("Component mounted");
    return () => {
      console.log("Component unmounted");
    };
  }, []);
  // 传递[count]，只在count变化时执行
  useEffect(() => {
    console.log("Count changed");
  }, [count]);
  // 不传第二个参数，每次组件重新渲染时都执行
  useEffect(() => {
    console.log("Component re-rendered");
  });
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}
export default Example;

在这个示例中，我们定义了三个useEffect函数，分别传递了空数组、依赖数组和不传第二个参数。当组件挂载时，第一个useEffect函数会执行一次，并输出"Component mounted"，当组件卸载时，返回的函数会执行一次，并输出"Component unmounted"。当点击按钮改变计数器的值时，第二个useEffect函数会执行，并输出"Count changed"。每次组件重新渲染时，第三个useEffect函数都会执行，并输出"Component re-rendered"。 需要注意的是，在使用useEffect时，应该确保其执行的副作用是可控的，不会对组件的性能、状态或渲染结果产生负面影响。