如何在 useEffect Hook 中重新渲染组件

Question

好吧：

  useEffect(() => {

  }, [props.lang]);

每次使用 props.lang 更改时，我应该在 useEffect 内部做什么来重新渲染组件？

---

解决方案：

我通过改变一些问题的想法来解决这个问题（我使用另一个函数来很好地处理语言变化。

Answer 1

想想你useEffect作为一个组合的componentDidMount，componentDidUpdate以及componentWillUnmount，在规定的阵营文档。

要表现得像componentDidMount，您需要useEffect像这样设置：

  useEffect(() => console.log('mounted'), []);

第一个参数是一个回调，将根据第二个参数触发，它是一个值数组。如果第二个参数中的任何值发生更改，您在内部定义的回调函数useEffect将被触发。

但是，在我展示的示例中，我将一个空数组作为我的第二个参数传递，并且永远不会更改，因此在组件安装时将调用一次回调函数。

那种总结useEffect。如果不是空值，你有一个参数，就像你的情况：

 useEffect(() => {

  }, [props.lang]);

这意味着每次props.lang更改时，都会调用您的回调函数。该useEffect不会重新呈现您的组件真的，除非你管理，可以触发一个重新呈现该回调函数里面的一些状态。

更新：

如果你想触发重新渲染，你的渲染函数需要有一个你正在更新的状态useEffect。

例如，在这里，渲染功能首先将英语显示为默认语言，在我的使用效果中，我在 3 秒后更改该语言，因此渲染会重新渲染并开始显示“西班牙语”。

  useEffect(() => console.log('mounted'), []);

完整代码：

Answer 2

最简单的方法

添加一个虚拟状态，您可以切换以始终启动重新渲染。

const [rerender, setRerender] = useState(false);

useEffect(()=>{

    ...
    setRerender(!rerender);
}, []);

这将确保重新渲染，因为组件总是在状态更改时重新渲染。

您可以setRerender(!rerender)随时随地调用来启动重新渲染。