系列文章目录
第一章: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方法