侦听器不触发具有依赖数组的 useEffect

在React中，当使用useEffect时，可以传递一个依赖数组作为第二个参数。当其中的依赖项发生变化时，useEffect会重新执行。

如果依赖数组为空，则useEffect只会在组件首次渲染时执行一次。

如果依赖数组包含了某个值，则只有该值发生变化时，useEffect才会重新执行。

下面是一个示例，展示如何使用依赖数组来避免useEffect在依赖项未变化时触发：

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);
  const [data, setData] = useState([]);

  useEffect(() => {
    // 模拟从服务器获取数据
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        setData(data);
      });
  }, []); // 传递一个空的依赖数组

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default Example;

在上面的示例中，useEffect函数只会在组件首次渲染时执行一次，因为传递了一个空的依赖数组[]。这意味着无论count的值如何变化，都不会触发useEffect重新执行。

请注意，如果依赖数组中的值发生变化，useEffect将会重新执行，这可能会导致性能问题。因此，应谨慎选择依赖项，以避免不必要的重复执行。