为什么仅在虚拟渲染时不调用函数

Question

我想了解我这里的 Label 函数的函数体何时会运行。

export default function App() {
  const label = <Label>Foo</Label>;

  return <Button>{label}</Button>;
}

const Button = (props) => {
  const shouldRenderChildren = false;

  return <button>{shouldRenderChildren && props.children}</button>;
};

const Label = () => {
  console.log("runing Label function");
  return <span>label</span>;
};

我创建了一个 Codesandbox - https://codesandbox.io/s/why-is-label-method-not-called-zodvn4?file=/src/App.js

注意 Label 函数中有一个 console.log。我在 App 中的 return 语句之前虚拟渲染这个组件。我期待这个函数会被调用。但是尝试上面的 Codesandbox，我们看到它没有被调用，因为在控制台中没有看到 "runing Label function"。

如果我在 Button 中将 shouldRenderChildren 更改为 true，那么我们会看到 "runing Label function" 记录到控制台，所以我们会看到 Label 被调用。这里是虚拟渲染和 dom-渲染。

除非 dom 渲染，否则 React.createElement 不会真正调用渲染方法吗？

Answer 1

而不是“dom-rendered”，您可能寻找的词已安装。

对于函数组件，函数体相当于class组件中的render方法；因此，该函数不会运行直到组件被渲染。

如果我们再次查看组件 life-cycle diagram，我们可以看到组件在准备好开始挂载之前不会被渲染。

因此，我相信最多，这一行

const label = <Label>Foo</Label>;

只是为组件调用 constructor。这是文档对构造函数的描述：

The constructor for a React component is called before it is mounted

如果你想测试它，将你的组件转换为 class 组件，并向构造函数添加一些 console.log，然后看看你这样做时会发生什么：const label = <Label>Foo</Label>;

编辑

我测试了一下，未挂载时连组件的构造函数都不调用：

https://codesandbox.io/s/why-is-label-render-not-called-vt05we

因此，最好假设直到一个组件即将被渲染，它甚至都没有被构建！

为什么仅在虚拟渲染时不调用函数

Why is function not called when virtually-rendered only

reactjs

编辑