Question

我可以这样定义一个组件：

class Welcome extends React.Component {
  render() {
    return <h1>Hello!</h1>;
  }
}

当我想在Dom中渲染该对象（或将其添加到虚拟DOM中）时，我打电话

ReactDOM.render(
  <Welcome />,
  document.getElementById('root')
);

这意味着在某个时刻，由于我们在.render()的{{1}}函数内部定义了return <h1>Hello!</h1>;，因此多个.render()函数相互嵌套。这也意味着我可以使用Welcome方法将对象呈现到DOM并定义一个新的react对象。

此语法来自official documentation

.render()只是将内容呈现到虚拟DOM上吗？并且嵌套是由React内部解决的吗？还是在它的后面？

Answer 1

来自Rendering a Component：

（已更新以反映您的代码）

class Welcome extends React.Component {
  render() {
    return <h1>Hello!</h1>;
  }
}
ReactDOM.render(
  <Welcome />,
  document.getElementById('root')
);

我们用ReactDOM.render()元素调用<Welcome />。
React以{}作为道具来调用Welcome组件。
我们的Welcome组件返回一个<h1>Hello!</h1>元素作为结果。
反应DOM有效地更新DOM以匹配<h1>Hello</h1>。

阅读React Life Cycle可能是有益的。

Answer 2

要了解渲染，您必须了解react在内部如何工作。为了更详细地了解这一点，我建议您阅读this，但这是一个快速概述：

从概念上讲，react组件只是一个返回如下Object的函数：

{
  type: 'button',
  props: {...} 
};

因此，类组件的render()部分仅指定将返回该组件的哪一部分。 react虚拟dom由彼此嵌套（在props.children中）的许多对象组成。 React将从顶部对象开始，将其转换为html节点并将其呈现给dom，然后对其所有子对象执行相同操作，等等。

.render（）函数在内部如何工作？

2 个答案: