为什么改变一个状态下的数组，改变useState中的原始数组？

在React中，useState是一种用于定义和管理组件状态的Hook。当使用useState定义一个数组状态时，数组是引用类型，意味着存储在状态中的数组是一个指向原始数组的引用。当我们想要在改变数组状态时，应该避免直接修改原始数组，而是应该创建一个新的数组，并将新数组赋值给原始数组的引用。

这样做的原因是遵循React的不可变性原则，它有以下优势：

避免直接修改原始数组：直接修改原始数组会导致React无法检测到状态的变化，从而无法进行有效的渲染和更新。
提高性能：通过创建新的数组，React可以更高效地比较前后状态的差异，从而只更新真正发生变化的部分，避免不必要的重新渲染。
更好的代码可读性和维护性：通过创建新的数组，我们可以清晰地追踪状态的变化，并且在需要时可以轻松地回溯和调试。

针对这个问题，如果想改变useState中的原始数组，应该使用数组的解构赋值或者数组的方法（如slice、concat、map等）创建一个新的数组，然后将新数组作为新的状态值传递给useState。

以下是一个示例代码：

import React, { useState } from 'react';

function MyComponent() {
  const [arrayState, setArrayState] = useState([1, 2, 3]);

  const handleClick = () => {
    const newArray = [...arrayState]; // 使用解构赋值创建新的数组
    newArray[0] = 0; // 修改新数组的状态
    setArrayState(newArray); // 更新状态
  };

  return (
    <div>
      <button onClick={handleClick}>Change Array State</button>
      <ul>
        {arrayState.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

这样，当点击按钮时，将会改变useState中的原始数组的第一个元素为0，并更新组件的渲染。