时间戳

首页 > 解决方案 > React：与 componentDidUpdate 相比如何使用 useEffect？

javascript - React：与 componentDidUpdate 相比如何使用 useEffect？

问题描述

我对 React 几乎是全新的。我已阅读文档并观看了一些 YT 视频。现在我正在尝试将我在网上找到的一些React 类组件“转换”为功能组件。这就是我已经走了多远：我的功能组件（codesandbox）。

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

我特别难以使用 useEffect 挂钩。据我了解，它应该充当 and 的等价componentWillMount物componentDidUpdate。Text现在我已经完成了几乎所有的设置，但是只要在 textarea 中添加新文本，它就不会更新组件。useEffect我相信这是因为我必须在组件的钩子中做一些事情Text：

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

我尝试过的事情导致了无限循环。请参阅：我可以在 useEffect 挂钩中使用设置状态吗？

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

标签： javascriptreactjsreact-hooksjsx

解决方案

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

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

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

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

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

推荐阅读