Question

我不太了解React中的“挂载”是什么意思，以及何时触发useEffect和cleanup函数。

在下面的示例中。看来useToggle挂钩已“绑定”到App组件（正确的术语？），并且每次变量isOn被更新时，绑定的App组件都会重新呈现。但是，也会调用cleanup函数。我试图将其与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

加载基本数据后使用效果已呈现

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

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

使用效果就像功能df['GP'] = df.PU.map(pd.DataFrame(group_post_dict).T .explode('lookup').set_index('lookup')['group_']) Out[158]: PU GP 0 pet dog pet 1 pet cat pet 2 flow red flow 3 flow yellow flow 4 b year year 5 c year year

如果未指定条件，componentDidMount + componentDidUpdate + componentwillUpdate + componentwillUnmount钩子将呈现每次更新。

基本使用效果

useeffect

您可以在一个函数组件中具有多个useEffect。如果您不希望所有useeffect挂钩都被称为每次更新。如果指定了条件。

当conditionOne更改时将被调用

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

当conditionTwo更改时将被调用

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

在大多数情况下，情况是指国家/地区

Answer 2

安装是指组件刚刚添加到DOM的时间。在类组件中，它是调用MyControl1之后的下一个调用。

在功能组件中，我们实际上没有onMount事件，而是具有constructor钩子。

useEffect与useEffect有一些区别，后者仅被调用一次（onMount），而前者在每次重新渲染组件时都被调用。每当状态/属性更改时，组件都会重新呈现。

从React docs：

在每次渲染后都运行useEffect吗？是的！默认情况下，它在第一次渲染后和每次更新后都运行。您可能会发现更容易想到效果是“渲染后”发生的，而不是用“安装”和“更新”的方式来思考。 React保证DOM在运行效果时已被更新。

由于componentDidMount可以被多次调用，因此还必须多次清除：

React何时确切地清除效果？当组件卸载时，React进行清除。但是，正如我们前面所了解的，效果会在每个渲染中运行，而不仅仅是一次。这就是为什么React在下次运行效果之前还要清除以前渲染中的效果的原因。

组件生命周期何时触发React的useEffect？

2 个答案: