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

Question

好吧:

  useEffect(() => {
    
  }, [props.lang]);

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

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>
  );
}

完整代码: