useEffec 如何检测 string[] 数组的变化

在 React 中，useEffect 钩子可以用来在组件的生命周期中执行副作用，比如 API 调用、订阅或手动更改 DOM。如果你想要在一个 string[]（字符串数组）发生变化时执行某些操作，你可以将该数组作为 useEffect 的依赖项。

当你把一个数组作为 useEffect 的依赖项时，React 将会对该数组的引用进行浅比较。这意味着，如果数组的内容变了，但是数组的引用没有变（例如你直接修改了数组的元素而没有创建一个新数组），React 将不会认为依赖项发生了变化。因此，为了确保 useEffect 能够检测到数组内容的变化，你需要在更改数组时创建一个新的数组。

下面是一个示例，展示了如何使用useEffect 来检测一个 string[] 的变化：

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

const MyComponent = () => {
  const [myArray, setMyArray] = useState<string[]>([]);

  useEffect(() => {
    // 这里的代码会在 myArray 变化时执行
    console.log('Array changed:', myArray);
  }, [myArray]); // 将 myArray 作为依赖项

  const addToArray = (item: string) => {
    setMyArray(prevArray => [...prevArray, item]);
  };

  return (
    <div>
      <button onClick={() => addToArray('new item')}>Add Item</button>
      {myArray.map((item, index) => (
        <div key={index}>{item}</div>
      ))}
    </div>
  );
};

export default MyComponent;

在这个示例中，每当 myArray 发生变化时，useEffect 中的代码就会执行。注意，在 addToArray 函数中，我们使用了 setMyArray 来创建一个新的数组，而不是直接修改现有的数组。这样可以确保 useEffect 能够正确地检测到数组的变化。