React 学习之路（二）——React元素渲染

最新推荐文章于 2024-02-29 11:54:03 发布

深海少女心

最新推荐文章于 2024-02-29 11:54:03 发布

阅读量223

点赞数

分类专栏：学习之路 react 网站开发文章标签：网站开发前端 react

本文链接：https://blog.csdn.net/weixin_42418158/article/details/102501423

版权

本文主要探讨React元素作为应用的基本构建块，它们是描述UI的普通对象。React DOM通过对比元素来更新DOM，确保数据的一致性。文章通过示例介绍了如何将React元素渲染到指定的DOM节点，并讨论了React如何智能地只更新变化的部分，提高性能。

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

元素是构成 React 应用的最小单位，它用于描述屏幕上输出的内容。

const element = <h1>Hello, world!</h1>;

与浏览器的 DOM 元素不同，React 当中的元素事实上是普通的对象，React DOM 可以确保浏览器 DOM 的数据内容与 React 元素保持一致。

首先我们在一个 HTML 页面中添加一个 id=“example” 的div，此 div 中的所有内容都将由 React DOM 来管理，所以我们将其称为 “根” DOM 节点。

<div id="example"></div>

用 React 开发应用时一般只会定义一个根节点。但如果你是在一个已有的项目当中引入 React 的话，你可能会需要在不同的部分单独定义 React 根节点。

接下里就是将React元素渲染到根DOM节点中，我们通过把它们都传递给 ReactDOM.render() 的方法来将其渲染到页面上：

const element = <h1>Hello, 鹿小程少儿编程!</h1>;
ReactDOM.render(
    element,
    document.getElementById('example')
);

看下效果
在这里插入图片描述
我们来尝试做一个计时器的例子

关注

专栏目录