为什么需要在函数中使用数组解构来重新渲染组件？

Question

在函数 setBit 中，我使用数组解构并更新位并重新渲染组件

function App() {
  const [bits, setBit] = useState([0, 0, 0, 0, 0]);

  const changeBit = index => {

    setBit(prevState => {
      prevState[index] = 1;

      return ([...prevState])
    });
  };

  useEffect(() => console.log(bits));

  return (
    <div className="container">
      <div className="app">
        <ul>
          {bits.map((bit, index) => {
            return <li onClick={() => changeBit(index)}>{bit}</li>;
          })}
        </ul>
      </div>
    </div>
  );
}

但是当我返回 prevState 时没有像这样的数组解构

  const changeBit = index => {

    setBit(prevState => {
      prevState[index] = 1;

      return (prevState);
    });
  };

位已更新，但组件不会重新渲染。

prevState 和 [...prevState] 之间有什么区别？

这是codesandbox的链接

Answer 1

这是因为您返回相同的对象（到 React）来更新状态（即 prevState） - 您已经改变了该对象 - 这不会导致重新渲染。如果您解构数组 [...prevState]，这是一个新对象并导致重新渲染。