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更新之后运行。

上面的代码演示了渲染首先被调用，然后是useEffect。

Answer 3

这是您的代码，您可以打开devtools并查看在调试器语句暂停您的代码时呈现的问候。这就是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>