React 的 useEffect 在组件生命周期中什么时候被触发？

Question

我不太明白 React 中的“Mount”是什么意思，什么时候触发 useEffect 和 clean up 函数。

在下面的例子中。 似乎 useToggle 钩子与 App 组件“绑定”（正确的术语？），每次变量isOn更新时，绑定的 App 组件都会重新呈现。 但是，也会调用清理函数。 我试图将它与 React 的类组件的生命周期进行比较。

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

参考：来自Trey Huffine 的图表， 并进行了编辑

useEffect(updateFunc => cleanupFunc, [dependency array])在生命周期中

 const { useReducer, useEffect } = React; // Purposefully moved the toggle logic to a custom hook for understanding function useToggle(inital) { const [isOn, toggle] = useReducer(isOn => !isOn, inital); useEffect(()=>{ console.log("update function called"); return () => console.log("cleanup function called"); }, [isOn]) return [isOn, toggle]; } function App() { const [isOn, toggle] = useToggle(false); return ( <div> <input type='checkbox' value={isOn} onClick={toggle}/> Click Me </div> ) } ReactDOM.render(<App/>, document.querySelector('.App'))

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script> <div class='App'/>

Answer 1

挂载意味着组件刚刚添加到 DOM 中。 在类组件中，它是调用constructor之后的下一个调用之一。

在函数式组件中，我们并没有真正的 onMount 事件，而是有useEffect钩子。

useEffect与componentDidMount有一些不同，后者只被调用一次（onMount），而前者在每次组件重新渲染时都会调用。 每当状态/道具发生变化时，都会重新渲染组件。

来自 React 文档：

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

由于useEffect可以被多次调用，它也必须多次清理：

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

Answer 2

加载基本数据后使用Effect进行渲染

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

首先，react 组件将渲染空数组 []。 之后 useEffect 钩子将加载数据并使用加载的数据再次渲染 html

使用效果是函数就像componentDidMount + componentDidUpdate + componentwillUpdate + componentwillUnmount

如果未指定条件useeffect钩子将呈现每次更新。

基本使用效果

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])

当 conditionTwo 改变时将被调用

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

在大多数情况下，条件是指状态