3

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

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 之前，即使它们以正确的顺序呈现，为什么会发生这种情况？

4

2 回答 2

0

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 期望的那样。

于 2021-06-11T23:07:47.143 回答
-1

较早出现console.log的原因是，将组件作为函数调用比普通的JSX声明要快得多。研究表明，它的速度提高了 45%。

此外，这也不是违规行为。最适合无状态功能组件。

资源 - https://medium.com/missive-app/45-faster-react-functional-components-now-3509a668e69f

如果您需要进一步的支持，请告诉我。

于 2021-06-13T07:24:30.400 回答