web前端高级React - React从入门到进阶之元素渲染

系列文章目录

第一章：React从入门到进阶之初识React
第二章：React从入门到进阶之JSX简介
第三章：React从入门到进阶之元素渲染
第四章：React从入门到进阶之JSX虚拟DOM渲染为真实DOM的原理和步骤
第五章：React从入门到进阶之组件化开发及Props属性传值
第六章：React从入门到进阶之state及组件的生命周期
第七章：React从入门到进阶之React事件处理

一、元素的渲染

• 元素是构成react应用的最小单元，它用于描述屏幕上输出的内容，也就是我们常说的虚拟DOM
• 与浏览器的DOM元素不同，React元素是创建开销极小的普通对象，然后通过ReactDOM更新真实DOM来与React元素保持一致
• 我们平时在浏览器中看到的内容都是由真实DOM元素构成的；React最终会把虚拟DOM元素转换为真实DOM并渲染
• 在第一章中我们讲项目的目录结构时提到public/index.html，在这个文件中有个id为“root”的div元素，我们将其称为“根”DOM节点，因为该节点内所有的内容都将有React DOM管理
• 我们在使用React构建应用时通常只会定义一个单一的根节点。但是如果我们想在一个已有的项目中引入React的话，那么我们可能需要在不同的部分单独定义React的根节点，因为在React的每个组件（后面章节会讲解组件）中只能有一个根节点存在
• 要想将React元素渲染到根DOM节点中，我们只需把它们传入ReactDOM的render方法即可，如下代码：

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

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

二、更新已渲染的元素

React 元素都是不可变的。当元素被创建之后，我们是无法改变其内容或属性的。
目前更新界面的唯一办法是创建一个新的元素，然后将它传入 ReactDOM.render() 方法替换原来的元素来重新渲染：
来看一下这个计时器的例子:

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

• 上面代码中我们定义了一个tick方法，在方法中定义了React元素并调用ReactDOM的render方法将元素渲染到根DOM节点root中，并在定时器中每隔1秒调用一次函数从而重新渲染页面。
• 我们还可以将React元素和JavaScript代码进行分离，把要展示的React元素封装起来，然后通过属性传值（后面章节中讲解）的方式把值动态的传给React元素，从而达到react元素与js代码分离的效果,看如下示例：

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

• 另外：除了函数外我们还可以创建一个 React.Component 的 ES6 类，该类封装了要展示的元素，需要注意的是在 render() 方法中，需要使用 this.props 替换 props，后面的章节中会详细讲解

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

三、元素的局部更新

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

尽管每一秒我们都会新建一个描述整个 UI 树的元素，React DOM 只会更新实际改变了的内容，也就是例子中的文本节点

下一章节中我们将会讲解一下JSX虚拟DOM渲染为真实DOM的原理和步骤以及重写React的createElement方法和ReactDOM的render方法