我只是在做一些实验，我注意到我是否有:

const Component1 = () => {
  console.log("Component1");
  return <div>Component1</div>;
};
const Component2 = () => {
  console.log("Component2");

  return <div>Component2</div>;
};

现在使用这样的组件时:

export default function App() {
  const [state, setState] = useState(false);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      <Component1 />
      {Component2()}

      <button onClick={setState.bind(null, !state)}>Change State</button>
    </div>
  );
}

我注意到在 console.log 中 component2 出现在 component1 之前，即使它们以正确的顺序呈现，为什么会发生这种情况？

最佳答案

JSX 元素是 React.createElement 的语法糖。 React.createElement 不会立即运行其中的组件:

const TheComponent = () => {
  console.log('component being created');
};
React.createElement(TheComponent);

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>

相反，它等待元素呈现。

当你做的时候

<Component1 />
{Component2()}

您立即调用 Component2，但由于渲染不会立即发生 - 它会稍后发生 - Component1 需要一些时间来记录。

请注意，永远不要使用

{Component2()}

渲染元素时 - 始终使用 JSX 语法或 React.createElement，正如 React 希望您做的那样。

https://stackoverflow.com/questions/67944280/