每个应用程序实例仅调用一次 React useEffect答案

【问题标题】：React useEffect only called once per app instance每个应用程序实例仅调用一次 React useEffect
【发布时间】：2021-11-11 06:55:40
【问题描述】：

我正在开发一个使用功能组件和钩子设计屏幕的项目。我遇到了一些按照我的理解不起作用的代码。我知道 useEffect 如果有一个空数组作为依赖项，它应该在每个组件生命周期中调用一次，但它不起作用。

  const [someState, setSomeState] = useState(false);

  useEffect(() => {
    setSomeState((prevState) => !prevState);
  }, []);

  useEffect(() => {
    console.log('useEffect');
    console.log(someState);
  }, [someState]);

输出：

[Thu Nov 11 2021 11:52:58.384]  LOG      useEffect
[Thu Nov 11 2021 11:52:58.385]  LOG      false
[Thu Nov 11 2021 11:52:58.404]  LOG      useEffect
[Thu Nov 11 2021 11:52:58.405]  LOG      true

这只会在控制台中打印一次 useEffect。现在当我回到这个屏幕时，它不会打印任何东西，但根据我的理解它应该打印。所以在屏幕导航useState之间以某种方式被持久化或屏幕实例。

库：

"@react-navigation/drawer": "^5.12.5",
"@react-navigation/native": "^5.9.3",
"@react-navigation/stack": "^5.14.3",
"react-native": "0.63.4",

屏幕是抽屉导航器的一部分

【问题讨论】：

我猜你在导航时没有卸载组件。如果你卸载然后再次安装组件，整个循环会再次发生。
@SobhanJahanmard 先生，我从来没有写过手动卸载组件的代码，你能告诉我怎么做吗
@SobhanJahanmard 我只是使用 navigation.goBack() 导航回上一个屏幕，它会自行卸载屏幕

标签： reactjs react-native react-navigation

【解决方案1】：

由于我对您的代码知之甚少，因此我将仅使用原始设置向您展示方法。

export default const componentA = ()=>{
const [toBeOrNotToBe,setToBeOrNotToBe]=useState(true)
const unmounter= ()=>{
    setToBeOrNotToBe(false)
}
useMemo(()=> {
  setTimeout(() =>setToBeOrNotToBe(true), 1000);
} ,[toBeOrNotToBe])
return {
    {toBeOrNotToBe && <ComponentB mounter={mounter}/>}
}

}

在 ComponentB 中定义一个触发props.mounter() 的按钮。因此，当您单击按钮时，您的 ComponentB 将被卸载，然后由于 useMemo 挂钩而再次安装。

【讨论】：