Reactjs 什么时候反应'；在组件生命周期中是否会触发使用效果？

我不太明白React中的“Mount”是什么意思，以及何时触发useffect和clean-up功能

在下面的例子中。似乎UseTokle钩子“绑定”（正确的术语？）到应用程序组件，并且每次变量

isOn

更新时，绑定的应用程序组件都会重新呈现。但是，也会调用cleanup函数。我试图将它与React的类组件的生命周期进行比较

如果我的理解有误，请纠正我

参考：包含编辑的图表

useffect（updateFunc=>cleanupFunc[dependency array]）

on生命周期

const{useReducer，useffect}=React；
//有目的地将切换逻辑移动到自定义挂钩以便于理解
函数UseTokle（初始）{
const[isOn，toggle]=useReducer（isOn=>！isOn，inital）；
useffect（（）=>{
log（“调用更新函数”）；
return（）=>console.log（“调用了清理函数”）；
}，[isOn]）
返回[isOn，toggle]；
}
函数App（）{
const[isOn，toggle]=使用切换（false）；
返回(
点击我
)
}
ReactDOM.render（，document.querySelector（'.App'））

---

加载基本数据后 渲染使用效果

这意味着如果您的页面从api加载数据。 如果我们假设数据是一个数组

首先，react组件将呈现空数组[]。 在那之后，useeffect钩子将加载数据并用加载的数据再次呈现html

使用效果是函数类似于

componentDidMount+componentdiddupdate+componentwillUpdate+componentwillUnmount

如果未指定条件

useffect

hook将渲染每个更新

基本使用效果

useEffect(() => {
  //Write the effect
  return () => {
    cleanup
  }
//specific condition to be triggered if you have one
}, [condition])

在一个函数组件中可以有多个useEffect。如果您不希望所有的useeffect钩子都被调用，那么每次更新都会调用。如果您指定了条件

将在更改conditionOne时调用

useEffect(() => {
      //Write the effect
      return () => {
        cleanup
      }
    //specific condition to be triggered if you have one
    }, [conditionOne])

useEffect(() => {
      //Write the effect
      return () => {
        cleanup
      }
    //specific condition to be triggered if you have one
    }, [conditionTwo])

将在条件2更改时调用

useEffect(() => {
      //Write the effect
      return () => {
        cleanup
      }
    //specific condition to be triggered if you have one
    }, [conditionOne])

useEffect(() => {
      //Write the effect
      return () => {
        cleanup
      }
    //specific condition to be triggered if you have one
    }, [conditionTwo])

---

在大多数情况下，当一个组件刚刚添加到DOM中时，条件是指状态

装载方式。在类组件中，它是调用

构造函数后的下一个调用之一

在功能组件中，我们实际上没有onMount事件，而是有
useffect
hook

useffect
与
componentDidMount
有一些不同，后者只调用一次（onMount），而前者在每次重新渲染组件时调用。只要状态/道具发生更改，组件就会重新渲染

从React文档：

每次渲染后是否运行useEffect？是！默认情况下，它在第一次渲染后和每次更新后都会运行。与其考虑“装载”和“更新”，您可能会发现更容易认为效果发生在“渲染后”。React保证DOM在运行效果时已更新

由于可以多次调用
useffect
，因此它还必须多次清理：

React什么时候清理效果？React在组件卸载时执行清理。但是，正如我们前面所了解的，效果会在每次渲染时运行，而不仅仅是一次。这就是为什么React还会在下次运行效果之前清除上一次渲染中的效果

你如何定义“挂载”？如果你的应用程序有多个页面。当单击特定页面时，将进行组件装载。>装载意味着组件刚刚添加到DOM中。当我们更新一个组件时，我们可以向DOM中添加新的东西，不管它们是组件还是html标记，根据您的逻辑，这是一个装载，但不应该是一个更新吗？你的意思是“当一个组件被添加到DOM中时，就会挂载该组件”？如果我们已经呈现了一个组件，并且我们向DOM中添加了新的东西，比如说另一个组件，那么该组件就会挂载，而当前组件会被更新。