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

Question

好的，所以：

   useEffect(() => {

  }, [props.lang]);

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

原文由 Piotr Żak 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

将您的 useEffect 视为 componentDidMount 、 componentDidUpdate 和 componentWillUnmount 的混合体，如 React 文档中所述。

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

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

第一个参数是一个回调，它将基于第二个参数触发，第二个参数是一个值数组。如果第二个参数中的任何值发生变化，您在 useEffect 中定义的回调函数将被触发。

然而，在我展示的示例中，我将一个空数组作为我的第二个参数传递，并且永远不会改变，所以当组件挂载时回调函数将被调用一次。

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

  useEffect(() => {

  }, [props.lang]);

这意味着每次 props.lang 更改时，都会调用您的回调函数。 useEffect 不会真正重新渲染您的组件，除非您在该回调函数中管理一些可能触发重新渲染的状态。

更新：

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

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

 function App() {
  const [lang, setLang] = useState("english");

  useEffect(() => {
    setTimeout(() => {
      setLang("spanish");
    }, 3000);
  }, []);

  return (
    <div className="App">
      <h1>Lang:</h1>
      <p>{lang}</p>
    </div>
  );
}

完整代码：

原文由 Elder Patten Ferreira 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

最简单的方法

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

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

useEffect(()=>{

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

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

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

原文由 Abraham 发布，翻译遵循 CC BY-SA 4.0 许可协议