Reactjs why useEffect有时会在每次装载/渲染时运行，而不仅仅是在第一次装载/渲染时运行

我在App.js中的路线中有一个useEffect

    <Switch>
      <Route exact path={['/en', '/fr']} component={HomePage} />
      <Route path={['/en/*', '/fr/*']}>
        <Route path="/:lang/*" component={DefaultLanguage} />

在同一个文件（App.js）中，我们有这样的组件（使用react localize redux）：

const DefaultLanguage=withLocalize(
（{activeLanguage，setActiveLanguage，…props}）=>{
useffect（（）=>{
console.log（“设置活动语言”）；
setActiveLanguage（props.match.params.lang）；
}, []);
返回；
}
);

---

问题是，我单击的每个链接都会运行setActiveLanguage，即使我放置了

[]

，使其仅在第一次渲染时运行（因为这是我唯一关心从URL设置语言的时候），我在应用程序的其他部分也遇到了这个问题。根据我的理解，除非组件的依赖项发生变化，否则useEffect不应该在每次装入组件时都运行，但我似乎遗漏了一个细节。

将空数组传递给

useEffect

会阻止它在后续渲染中运行，这是正确的，但是，如果卸载组件，然后再次安装，这不会阻止它运行

我的猜测是，通过单击链接，实际上是在卸载然后重新装载

DefaultLanguage

组件

您可以通过从

useffect

hook返回清理函数来测试这一点

比如说,

useEffect(() => {
      console.log('setting active language');
      setActiveLanguage(props.match.params.lang);

      return () => console.log('Unmounting');
    }, []);

如果你看到了日志，那么你已经发现了你的问题

一个快速而肮脏的解决方案可能是检查语言是否已更改，如果已更改，则进行设置。这不会解决可能不必要的装载/卸载问题，但至少可以避免再次设置语言

useEffect(() => {
      if (activeLanguage !== props.match.params.lang) {
        console.log('setting active language');
        setActiveLanguage(props.match.params.lang);
      }
    }, []);

---

将空数组传递给

useffect

将阻止它在后续渲染中运行，这是正确的，但如果卸载组件然后再次装载，则不会阻止它运行

我的猜测是，通过单击链接，实际上是在卸载然后重新装载

DefaultLanguage

组件

您可以通过从

useffect

hook返回清理函数来测试这一点

比如说,

useEffect(() => {
      console.log('setting active language');
      setActiveLanguage(props.match.params.lang);

      return () => console.log('Unmounting');
    }, []);

如果你看到了日志，那么你已经发现了你的问题

一个快速而肮脏的解决方案可能是检查语言是否已更改，如果已更改，则进行设置。这不会解决可能不必要的装载/卸载问题，但至少可以避免再次设置语言

useEffect(() => {
      if (activeLanguage !== props.match.params.lang) {
        console.log('setting active language');
        setActiveLanguage(props.match.params.lang);
      }
    }, []);

---

我错过的细节是渲染和装载之间的区别。我认为无论发生什么情况，

[]

的useEffect都不会再次运行。这非常有帮助。我错过的细节是渲染和装载之间的区别。我认为无论发生什么情况，

[]

的useEffect都不会再次运行。这很有帮助。