Javascript 为什么我在React-useState钩子中变异状态很重要？

我到处都读到，React中的状态变化可能会导致问题，例如，组件在状态更新时不会重新渲染，但是下面的代码工作得非常好。每次出现状态更新时，组件都会重新渲染

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

const Mutator = () => {
  const [checks, setChecks] = useState({ 66: false });

  const rows = [{ id: 23 }, { id: 33 }, { id: 44 }, { id: 55 }];

  useEffect(() => {
    console.log("check updates", checks);
  }, [checks]);

  const mutateMyCheck = () => {
    rows.forEach((row, i) => {
      checks[row.id] = checks[row.id] ? checks[row.id] + i : 1;
    });

    setChecks({ ...checks });
  };
  return (
    <div>
      <button onClick={mutateMyCheck}>Check</button>
      <div>{JSON.stringify(checks)}</div>
    </div>
  );
};

import React，{useState，useffect}来自“React”；
常量变量=（）=>{
const[checks，setChecks]=useState（{66:false}）；
const rows=[{id:23}，{id:33}，{id:44}，{id:55}]；
useffect（（）=>{
日志（“检查更新”，检查）；
}，[支票]；
常量mutateMyCheck=（）=>{
rows.forEach（（row，i）=>{
checks[row.id]=checks[row.id]？checks[row.id]+i:1；
});
setChecks（{…checks}）；
};
返回(
检查
{JSON.stringify（检查）}
);
};

那么，不改变状态有什么意义呢？或者它什么时候真的有效果

 mutateMyCheck(); mutateMyCheck();

这不会使支票增加两倍

---

在这种情况下，您应该使用。

您可以直接改变状态，但也可以通过对象扩展返回新对象：

setChecks({ ...checks });

---

因为这会创建一个新对象，所以组件会重新渲染。

。另外，绝对没有理由在所附的示例中改变状态。使用

Array.prototype.map（）

或

Array.prototype.reduce（）

True也可以实现同样的效果。虽然reduce更像是一种样式首选项，但它并没有使它更干净，所以没有提到-

rows.reduce（（obj，row，i）=>（{……obj，[row.id]：检查[row.id]？检查[row.id]+i:1，}），{}）

另外，如果行在1000秒内，我不会在每次迭代中都进行这样的排列，但每次都会返回相同的对象（变异），因为它的速度要慢得多，因此在1000秒内+将类似于变异循环以提高效率。在这种情况下，这是一个样式决定。但是，如果考虑到可能的状态突变的后果，它就不再是一个；您的状态与DOM呈现的状态不同，或者想象您已经连接了多个挂钩。或者想想它带来的困惑。