React：如何使用use效果与组件相比？

Question

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

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

我特别是有一个困难的时间与useEffect挂钩。据我所知，它应该充当componentWillMount和componentdiddupdate的等价物。现在我已经完成了几乎所有的设置，但是每当在文本区域中添加新文本时，它都不会更新Text组件。我相信这是因为我必须在Text组件中的useffect挂钩中执行一些操作：

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

我尝试过的事情导致了一个无限的循环。请参见：我是否可以在use效应钩子中使用设置状态。

有人能给我指出正确的方向吗？请随意使用代码沙盒：）

Answer 1

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

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

Answer 2

首先，useEffect不像componentWillMount，它的componentDidMount效果在渲染后激发。

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

为此，效果如下所示：

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

第三，也是最重要的一点，您也不应该这样做，因为行实际上不是文本组件的状态-它只是基于dummyText属性的计算值。状态是您的组件所拥有的，它所创建的。您的Text组件没有创建行，它只是根据dummyText属性计算行。