如何仅在数组长度发生变化时触发 Effect ？

在 React 中，如果你想仅在数组长度发生变化时触发 Effect，你可以在 useEffect 的依赖数组中放入该数组的长度。这样可以确保只有当数组长度变化时，Effect 才会被重新执行。

下面是实现此目的的代码示例：

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

function MyComponent() {
  const [items, setItems] = useState([]);

  useEffect(() => {
    // 这个 Effect 会在 items 数组长度变化时触发
    console.log('数组长度发生变化了:', items.length);
  }, [items.length]); // 依赖于数组长度

  // 一个添加新项到数组的函数
  const addItem = () => {
    setItems(prevItems => [...prevItems, `Item ${prevItems.length}`]);
  };

  return (
    <div>
      <button onClick={addItem}>添加项目</button>
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

在上面的例子中，我们创建了一个 MyComponent 组件，它包含一个 items 状态数组和一个 addItem 函数，可以将新项添加到数组中。useEffect 依赖于 items.length，因此只有在数组长度发生变化时，才会输出数组长度的新值。