.render()函数如何在内部工作?

问题描述 投票:1回答:2

我可以像这样定义一个组件:

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

当我想在Dom中渲染这个对象(或者更确切地说将它添加到虚拟DOM)时,我调用了

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

这意味着在某些时候,由于我们在.render()return <h1>Hello!</h1>;函数中定义了.render(),因此多个Welcome函数嵌套在彼此内部。这也意味着我可以使用.render()方法将一个Object渲染到DOM并定义一个新的反应对象。

此语法来自official documentation

.render()是否只是将内容呈现给虚拟DOM,而内部的React是否已解决嵌套问题,或者它背后是否有更多内容?

javascript reactjs
2个回答
1
投票

来自Rendering a Component

(更新以反映您的代码)

class Welcome extends React.Component {
  render() {
    return <h1>Hello!</h1>;
  }
}
ReactDOM.render(
  <Welcome />,
  document.getElementById('root')
);
  1. 我们用ReactDOM.render()元素称<Welcome />
  2. React使用{}作为道具调用Welcome组件。
  3. 我们的Welcome组件返回一个<h1>Hello!</h1>元素作为结果。
  4. React DOM有效地更新DOM以匹配<h1>Hello</h1>

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


0
投票

要理解渲染,您必须了解反应如何在内部起作用。为了更详细地理解这一点,我会重新阅读this,但这里是一个快速概述:

从概念上讲,react组件只是一个返回Object的函数,如下所示:

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

因此,类组件的render()部分仅指定将返回组件的哪个部分。 react虚拟dom由许多嵌套在彼此内部的对象组成(在props.children中)。 React将从顶层对象开始,将其转换为html节点并将其渲染到dom,然后对其所有子节点执行相同操作。

© www.soinside.com 2019 - 2024. All rights reserved.