Question

我到处都读到，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>
  );
};

那么不改变状态的意义是什么？或什么时候才真正起作用？

Answer 1

您直接在改变状态，但同时也通过对象传播返回了一个新对象：

setChecks({ ...checks });

由于这会创建一个新对象，因此组件会重新渲染。

Answer 2

 mutateMyCheck(); mutateMyCheck();

那不会增加两次支票。

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

如果我在React useState钩子中对状态进行突变，为什么会很重要？

2 个答案: