【React】手把手学习React - 元素渲染

前言

大家好，分享了这么多文章发现无论是项目实战还是源码分析或者是基本使用，绝大多数文章都是关于Vue的，还没有关于React的分享，接下来从今天开始我们将一起学习一下React。React与vue一样也是一个非常火爆的前端库。关于React的基本介绍我们曾在之前的一篇文章中分享过了，感兴趣的小伙伴可以前往初识React查看。今天的分享我们将学习一下React中的元素渲染。

元素的渲染

什么是元素的渲染呢？在React的官方有这么一句话来描述：元素是构成react应用的最小单元，它用于描述屏幕上输出的内容。其实当我们打开一个网页时呈现在我们眼前的内容都是由元素组成的，但React中的元素与浏览器的DOM元素不同，React元素是创建开销极小的普通对象（可以理解为虚拟dom），然后通过ReactDOM更新真实DOM来与React元素保持一致。我们平时在浏览器中看到的内容都是由真实DOM元素构成的；React最终会把虚拟DOM元素转换为真实DOM并渲染

在初识React中我们讲项目的目录结构时提到public/index.html，在这个文件中有个id为“root”的div元素，我们将其称为根DOM节点，因为该节点内所有的内容都将由React DOM管理。当我们使用React构建应用时通常只会定义一个单一的根节点。在React的每个组件（后面章节会讲解组件）中只能有一个根节点存在 要想将React元素渲染到根DOM节点中，我们只需把它们传入ReactDOM的render方法即可，如下代码：

const element = <h1>Hello, world!</h1>
ReactDOM.render(
	element,
   document.getElementById("root") 	
); 

执行上面的代码，页面上就会出现“Hello, world”

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BkfOzxfL-1658320147085)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7e328f60641d40b6b03a9ae3b8a9ca32~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)]

更新已渲染的元素

React 元素都是不可变的。当元素被创建之后，我们是无法改变其内容或属性的。那么如果我们想把已经渲染的元素更新掉该怎么办呢，目前能想到唯一办法就是创建一个新的元素，然后将它传入 ReactDOM.render() 方法替换原来的元素以实现重新渲染，下面我们来看一个显示当前时间的例子：

function currentDate() {
const element = (
   <div>
    <h1>Hello, world!</h1>
     <h2>现在是： {new Date().toLocaleTimeString()}.</h2>
   </div>
 );
 ReactDOM.render(
   element,
   document.getElementById('root')
 );
}
setInterval(currentDate, 1000); 

上面代码中我们定义了一个currentDate方法，在方法中定义了React元素并调用ReactDOM的render方法将元素渲染到根DOM节点root中，并在定时器中每隔1秒调用一次函数从而重新渲染页面。但是我们发现React元素的代码和javascript的代码杂在了一起，其实我们可以把两者进行分离，让React元素专门用于渲染，而javascript专门干javascript该干的事。我们可以把用于展示的React元素封装起来，然后通过属性传值（后面章节中讲解）的方式把值动态的传给React元素，从而达到react元素与js代码分离的效果，同时也能达到代码复用的目的,看如下示例：

function Clock(props) {
 return (
   <div>
     <h1>Hello, world!</h1>
     <h2>现在是：{props.date.toLocaleTimeString()}.</h2>
   </div>
 );
}
function currentDate() {
 ReactDOM.render(
   <Clock date={new Date()} />,
   document.getElementById('root')
 );
}
setInterval(currentDate, 1000); 

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aP9tEnN7-1658320147086)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ba24a5f96cf8451a82302e2e46027856~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)]

元素的局部更新

React在更新已渲染的元素的时候，ReactDOM会将元素和它的子元素与它们之前的状态进行对比，并且只会更新与之前状态不一样的元素，也就是说哪些元素发生了变化就更新哪些元素，而不是全部更新， 我们可以通过浏览器的检查元素工具查看上一个例子来确认这一点。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x3Xb678B-1658320147086)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3439d35ba05a4b928bcfae92ada5f421~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)]

尽管每一秒我们都会新建一个描述整个 UI 树的元素，但实际上React DOM 只会更新发生了改变的内容，也就是例子中的h2显示当前日期部分

总结

本次分享我们学习了react中的元素渲染，首先学习了react中元素的概念，然后还简单介绍了react中元素与浏览器中dom元素的区别，最后通过显示Hello，world和实时获取当前时间的小例子来展示了如何实现react中的元素渲染。今天的分享就都这里了！！！