javascript - React 中 JSX 的评​​估顺序是什么？

Question

假设我有以下组件:

const Cell = (props) => {
    const { cellData } = props;
    console.log("--START--")
    console.log(cellData);
    console.log("--END--")
    return <div>cellData</div>;
};

const Col = (props) => {
    const { cell } = props;
    console.log(cell);
    return (<div>    </div>);
}

做类似的事情

    const col = (<Col 
        cell={<Cell />}
    />);

    const content = (
        <div>
            {col}
        </div>
    );

似乎首先在 Col 中运行代码。但是如果 props 只是一个函数参数，它不应该运行 <Cell />第一部分被传入？

Answer 1

对于它的值(value)，这是一件微不足道的测试。你看到的和你问的是同一过程的两个方面。
问题
当您控制台登录功能组件的主体时，这是作为副作用完成的。

函数组件的函数体本质上等同于基于类的组件的render。方法。换句话说，整个函数就是“渲染”方法。 React “渲染”每个组件作为协调过程的一部分，以计算从任何一个渲染周期到下一个渲染周期的差异。另请注意，“渲染”函数将被视为纯函数，没有任何副作用，如控制台日志记录或任​​何其他异步行为。
您询问“评估顺序”，您认为应该看到的是“渲染顺序”。换句话说，React 必须从上到下以深度优先遍历的方式评估组件树，但它从下到上渲染到 DOM。它需要完全处理任何子树中的所有子树才能计算该子树的差异。
在 React 中，我们通常不关心任何事情，直到组件被挂载并可用，因为这是组件可以“使用 DOM、运行副作用和安排更新”的时候。这就是为什么安装顺序通常比评估顺序更重要的原因。 React 可以“暂停、中止或重新启动”评估。
使用提供的代码，在组件渲染到 DOM 时修改为控制台日志:

const Cell = ({ cellData }) => {
  useEffect(() => {
    console.log("Cell MOUNTED");
    console.log("--START--");
    console.log({ cellData });
    console.log("--END--");
  }, []);
  return <div>{cellData}</div>;
};

const Col = ({ cell }) => {
  useEffect(() => {
    console.log("Col MOUNTED", { cell });
  }, []);
  return <div>Col: {cell}</div>;
};

export default function App() {
  const col = <Col cell={<Cell cellData="hello world!" />} />;

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      <div>{col}</div>
    </div>
  );
}

可以看到子组件 Cell在父组件 Col 之前先渲染记录它已安装。

Cell MOUNTED 
--START-- 
{cellData: "hello world!"}
--END-- 
Col MOUNTED 
{cell: Object}

渲染组件的一部分是完全渲染其子组件的子树。所有的 child 都需要先被渲染。它不可能以任何其他方式或任何其他顺序工作。如果 React 没有这种确定性的顺序，那么就不可能将渲染的 DOM 结果从一个渲染周期转移到下一个渲染周期。