React：与 componentDidUpdate 相比如何使用 useEffect？答案

【问题标题】：React: how to use useEffect compared to componentDidUpdate?React：与 componentDidUpdate 相比如何使用 useEffect？
【发布时间】：2021-11-07 12:35:36
【问题描述】：

我对 React 非常陌生。我已阅读文档并观看了一些 YT 视频。现在我正在尝试将我在网上找到的一些this React class component“转换”为功能组件。这是我已经走了多远：My functional component(codesandbox)。

它是一个基于用户输入字段使用tspan元素自动包装SVG文本的组件。

我特别难以使用 useEffect 挂钩。据我了解，它应该相当于componentWillMount 和componentDidUpdate。现在我已经完成了几乎所有的设置，但是每当在 textarea 中添加新文本时，它还没有更新 Text 组件。我相信这是因为我必须在Text 组件中的useEffect 钩子中做一些事情：

  useEffect(() => {
    //something so that lines get updated if the user input changes?
  }, [lines]);

我尝试过的事情导致了无限循环。见：Can I use set state inside a useEffect hook。

有人能指出我正确的方向吗？随意分叉代码框:)

【问题讨论】：

您能再附加一个链接到您的代码吗？现在有虚拟数据
@Pasha 给你：codesandbox.io/s/youthful-flower-dy2u1?file=/src/App.js

标签： javascript reactjs react-hooks jsx

【解决方案1】：

首先，useEffect 不像 componentWillMount，它是 componentDidMount - 在渲染之后触发效果。

其次，在您的具体示例中，您想要的是在 dummyText 更新时触发一个效果，以便它可以重新计算行。

为此，您的效果如下所示：

  useEffect(() => {
    //something so that lines get updated if the user input changes?
  }, [dummyText]);

第三，也是最重要的一点，您也不应该这样做，因为lines 实际上并不是您的Text 组件的状态 - 它只是一个基于dummyText 属性的计算值. state 是你的组件拥有的东西，是它创建的东西。您的 Text 组件没有创建线，它只是根据 dummyText 属性计算它们。

【讨论】：

好的，明白了。你建议我做什么来达到我想要的结果？将逻辑移至Content 组件，因为 dummyText 是该组件的状态？
@Reinier68 - 完全正确。

【解决方案2】：

在您的 Text 组件中，您的 useEffect 函数不会跟踪 dummyText 属性。尝试将其添加到依赖数组中，如下所示（Text.jsx，第 60 行）：

  useEffect(() => {
    const { wordsWithComputedWidth, spaceWidth } = calculateWordWidths();
    const lines2 = calculateLines(wordsWithComputedWidth, spaceWidth, 400);
    setLines(lines2);
  }, [dummyText]);

【讨论】：