为什么会再次影响子组件？

Question

我想要一些帮助，请理解以下代码为何导致inf渲染循环。我认为，这应该是周期：

1. 渲染容器。

2. 渲染子StrRow。

3. 第一次运行效果并调用update（）。

4. 更改容器状态。

5. 重新渲染容器。

6. 重新渲染Chlid StrRow。

7. DO NOT再次生效，因为依存关系未更改。

但是，效果似乎在每次渲染StrRow之后都会运行。

function Container() {
  const [count, setCount] = React.useState(0);

  const update = React.useCallback(() => {
    setCount(count + 1);
  }, [count, setCount]);

  return (
    <div style={{ background: "#ccc", border: "3px solid black" }}>
      Increced Length {count} Times.
      <StrRow update={update} />
    </div>
  );
}

function StrRow({update}) {
  const [str, setStr] = React.useState(">");

  React.useEffect(() => {
    update();
  }, [str]);

  return (
    <div style={{ background: "#27b" }}>
      <div>{str}</div>
      <button
        onClick={() => {
          setStr(str + ">");
        }}
      >
        Add Length
      </button>
    </div>
  );
}

这里是一个沙盒链接，其中的update（）调用已被注释掉以防止inf循环：https://codesandbox.io/s/compassionate-montalcini-muiod?file=/src/App.js

[请注意，我不是在寻找修复或更改此代码的方法。我只想了解问题的原因。

非常感谢！

Answer 1

这是因为update setsState会导致重新渲染，从而渲染您的<StrRow>组件，useEffect中的onMount会调用该setState..etc的更新函数，并且将永远如此。>

Answer 2

演示中的内容与帖子中的内容略有不同。