useEffect 在渲染之前运行？

Question

export default function Example() {

   useEffect(()=>{
       console.log('DOM has not rendered anything yet')
   });

    return (
        <div>
            Hello
        </div>
    );
}

上面的代码首先是控制台消息，然后Hello 出现在我的页面上。但是，通过调试代码，我可以看到return 在useEffect 之前。那么为什么useEffect第一次运行时看不到Hello呢？

此外，如果使用来自https://reactjs.org/docs/hooks-effect.html#example-using-hooks的代码：

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

看到第一次执行useEffect的回调时，只有按钮可见，You clicked 0 times不可见。

Answer 1

查看钩子效果docs

useEffect 有什么作用？通过使用这个 Hook，你告诉 React 你的组件需要在渲染后做一些事情。 React 会记住您传递的函数（我们将其称为“效果”），并稍后在执行 DOM 更新后调用它。在这个效果中，我们设置了文档标题，但我们也可以执行数据获取或调用其他一些命令式 API。

Answer 2

尝试运行此代码并查看日志消息的顺序。

function App() {

  useEffect(() => {
    console.log('DOM has not rendered anything yet')
  });

  function hello() {
    console.log("render")
  }

  return (
    <div onClick={hello()} >
      Hello
    </div>
  );

}

useEffect 与 componentDidMount 类似，它在第一次渲染后和每次更新 dom 后运行。

上面的代码演示了先调用render，然后调用useEffect。

Answer 3

这是您的代码，您可以打开开发工具并看到当调试器语句暂停您的代码时会呈现 hello。这就是 React 的行为方式，正如 2 个人已经指出的那样。

const { useState, useEffect } = React;
function App() {
  useEffect(() => {
    debugger;
    console.log('last');
  });
  console.log('first');
  //this is returned and react will render this to dom before
  //  your effect is called as documented and as 2 people already pointed out
  return <div>Hello</div>;
}

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>

<div id="root"></div>