React:与componentdiduupdate相比，如何使用useEffect ?

Question

我对React非常陌生。我读了文档，看了一些YT的视频。现在我正在尝试将我在网上找到的一些React类组件"转换"为功能组件。我的功能组件(codesandbox)

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

我在使用useEffect钩子时特别困难。根据我的理解，它应该是componentWillMount和componentDidUpdate的等价物。现在我已经设置好了一切，但是每当在文本区域中添加新文本时，它还没有更新Text组件。我相信这是因为我必须在Text组件的useEffect钩子中做一些事情:

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

我尝试过的东西导致了一个无限循环。参见:我可以在useEffect钩子中使用set state吗?

谁能给我指个方向吗?请随意fork codesandbox:)

Answer 1

首先，useEffect不像componentWillMount，它是componentDidMount - effects火之后的一个渲染。

其次，在您的特定示例中，您想要的是在dummyText时触发一个效果更新，以便可以重新计算行。 为了做到这一点，你的效果看起来像这样:

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

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

Answer 2

在您的Text组件中，您的useEffect函数不跟踪dummyTextprop。尝试将其添加到依赖项数组中，如下所示(Text。Jsx，第60行):

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