React 元素渲染

最新推荐文章于 2022-08-09 18:44:38 发布

小晗同学

最新推荐文章于 2022-08-09 18:44:38 发布

阅读量279

点赞数 1

分类专栏： React 文章标签： reactjs props 组件化

本文链接：https://blog.csdn.net/Yuki_yuhan/article/details/115967826

版权

React 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

这篇博客介绍了React元素作为应用的基本构建块，它们是轻量级的对象，不可变且用于描述UI。ReactDOM通过比较新旧元素来更新DOM，实现高效更新。文章还展示了如何渲染元素到页面及包裹元素以渲染多个组件。

摘要由CSDN通过智能技术生成

React 学习：元素渲染

元素是构成 React 应用的最小砖块，它描述了你在屏幕上想看到的内容。const element = <h1>Hello, world</h1>;
与浏览器的 DOM 元素不同，React 元素是创建开销极小的普通对象。React DOM 会负责更新 DOM 来与 React 元素保持一致。
React 元素是不可变对象。一旦被创建，你就无法更改它的子元素或者属性。但是将元素或属性封装到有状态组件中，就可以实现更新渲染。
React 只更新它需要更新的部分，即 React DOM 会将元素和它的子元素与它们之前的状态进行比较，并只会进行必要的更新来使 DOM 达到预期的状态。
注意：你可能会将元素与另一个被熟知的概念——“组件”混淆起来，组件是由元素构成的。

<!-- 在html中定义一个根节点 -->
<!-- 该节点内的所有内容都将由 React DOM 管理 -->
<div id="root"></div>

// 定义元素
const element = <h1>Hello, world</h1>;
// 渲染元素 --> 将 element 渲染到 id为root 的根节点里去
// 将一个 React 元素渲染到根 DOM 节点中，只需把它们一起传入 ReactDOM.render()
ReactDOM.render(element, document.getElementById('root'));

// 将多个元素包裹，可以实现同时渲染多个元素
const more = (
  <div>
    <h1>Hello,Peppa</h1>
    <h2>Hello,George</h2>
  </div>
);
ReactDOM.render(more, document.getElementById('root'));