使用在 React 中未正确调用自定义钩子内部的效果

您的输出是应该的。我认为你对输出感到困惑，因为你认为这与输出相同，但这是不正确的。它们都是不同的，它们之间的几个重要区别如下：useEffectcomponentDidMount它们在不同的时间运行（与您的问题相关）它们都是在组件的初始呈现之后调用的，但在浏览器绘制屏幕之后调用，而在浏览器绘制屏幕之前调用。useEffectcomponentDidMount捕捉道具和状态（与您的问题无关，请随时跳到答案的末尾）useEffect捕获状态和道具，而不这样做。componentDidMount请考虑以下代码片段，以了解使用效果捕获状态和道具的含义。class App extends React.Component {  constructor() {    super();    this.state = {      count: 0    };  }  componentDidMount() {    setTimeout(() => {      console.log('count value = ' + this.state.count);    }, 4000);  }  render() {    return (      <div>        <p>You clicked the button { this.state.count } times</p>        <button          onClick={ () => this.setState(prev => ({ count: prev.count + 1 })) }>          Increment Counter        </button>      </div>    );  }}ReactDOM.render(<App />, document.getElementById('root'));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script><div id="root"></div>function App() {  const [count, setCount] = React.useState(0);  React.useEffect(() => {    setTimeout(() => {      console.log('count value = ' + count);    }, 4000);  }, [])    return (    <div>      <p>You clicked the button { count } times</p>      <button        onClick={ () => setCount(count + 1) }>        Increment Counter      </button>    </div>  );}ReactDOM.render(<App />, document.getElementById('root'));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script><div id="root"></div>两个代码片段是相同的，除了第一个代码片段具有基于类的组件，第二个代码片段具有功能组件。这两个代码段都有一个名为状态的变量，它们都在 4 秒后将变量的值记录到控制台。它们还包括一个按钮，可用于递增 .countcountcount尝试单击按钮（4 或 5 次），然后将的值记录在控制台上。count如果您认为这一点并且相同，那么您可能会惊讶地发现两个代码片段在4秒后都记录了不同的变量值。componentDidMountuseEffectcount基于类的代码段记录最新值，而基于函数组件的代码段记录变量的初始值。count它们记录变量的不同值的原因是：countthis.state类内部组件始终指向最新状态，因此它会记录 4 秒后的最新值。countuseEffect 捕获变量的初始值，并记录捕获的值而不是最新值。count有关和之间的差异的深入说明，我建议您阅读以下文章useEffectcomponentDidMountuseEffect（fn， []）不是新的组件DidMount（）完整的使用指南效果回到你的问题如果您注意了我的答案中与您的问题相关的第一部分，那么您现在可能明白了为什么在安装和组件后运行其回调。useEffectFirstSecond如果没有，那么让我解释一下。在执行从组件内部调用的函数后，将挂载组件，如果它是基于类的组件，则此时将调用其生命周期函数。useCustomHookFirstFirstcomponentDidMount在组件挂载后，组件挂载，如果这也是一个基于类的组件，则此时将调用其生命周期函数。FirstSecondcomponentDidMount安装完两个组件后，浏览器将绘制屏幕，因此，您会在屏幕上看到输出。浏览器绘制完屏幕后，将对和组件执行 useEffect 的回调函数。FirstSecond简而言之，让浏览器在运行其效果/回调之前绘制屏幕。这就是为什么记录在输出的末尾。useEffectuseEffect gets called您可以在官方文档上查看有关此内容的更多详细信息：效果时间如果将和组件转换为类组件，则输出将如下所示：FirstSecond1. component First rendering2. component Second rendering3. component First mounted.      // console.log statement inside componentDidMount4. component Second mounted.     // console.log statement inside componentDidMount您可能希望第 3 行位于第 2 位，第 2 行位于第 3 位，但事实并非如此，因为 react 首先执行所有子组件的渲染函数，然后再将它们插入 DOM 中，并且只有在它们插入到 DOM 中之后，每个组件才会执行。componentDidMount如果创建和组件并创建类组件的以下层次结构：ThirdFourthApp |__ First |     |__ Third |          |__ Fourth |  |__ Second然后，您将获得以下输出：1.  First component constructor2.  component First rendering3.  Third component constructor4.  component Third rendering5.  Fourth component constructor6.  component Fourth rendering7.  Second component constructor8.  component Second rendering9.  component Fourth mounted10. component Third mounted11. component First mounted12. component Second mounted

使用在 React 中未正确调用自定义钩子内部的效果

2回答