React-渲染元素

开场白

接着上一节JSX的讲解后：我们大概清楚了以下几个事儿:

知道JSX是个什么东东

为什么React要推荐使用JSX

以及JSX的一些基本语法。

本篇文章谈一下React是怎么渲染元素的。

元素

元素是React应用中的最小部件，正是由一个或多个元素构建出来了组件。
一个元素用于描述你将在屏幕上看到的内容，比如：

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

渲染元素到DOM

根DOM节点

假设我们的HTML文件中有这样的一个<div>:

<div id="root"></div>

我们称这是一个根DOM节点，该节点内的所有内容都是有React DOM管理

注意

一个用React构建的应用程序通常只有一个根DOM节点。
但是如果把这些应用程序整合到现有的app当中去，那么该app中就可能会包含多个相互独立的根DOM节点。

更新已渲染的元素

React元素是不可变的，一旦你创建了一个元素，就不能再修改其子元素或任何属性。
更新UI的唯一方法是创建一个新的元素，并将其传入到ReactDOM.render()方法。
来思考下时钟的例子,完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>rendering-elements</title><script src="../build/react.js"></script><script src="../build/react-dom.js"></script><script src="../build/browser.min.js"></script><script src="../build/jquery.min.js"></script><script type="text/babel">function tick() {const element = (<div><h1>Hello,world!</h1><h2>It is {new Date().toLocaleTimeString()}</h2></div>);ReactDOM.render(element,document.getElementById('root'))}setInterval(tick,1000);</script>
</head>
<body>
<div id="root"></div>
</body>
</html>

以上代码，每隔1秒，就会通过setInterval()回调ReactDOM.render()方法来重新渲染元素。

注意:

实际上，大多数 React 应用只会调用 ReactDOM.render() 一次。在接下来的章节中，我们将学习如何将这些代码封装到有状态的组件中。

React 只更新必需要更新的部分

React DOM 会将元素及其子元素与之前版本逐一对比, 并只对有必要更新的 DOM 进行更新, 以达到 DOM 所需的状态。
我们对上一个例子进行检查来验证这一点:

从上图中我们可以看出，即使我们我们每隔 1 秒都重建了整个元素, 但实际上 React DOM 只更新了修改过的文本节点。
本文做为自己加强记忆之篇，均参考自：
http://www.css88.com/react/do...，在此列出，大家共同学习。

欢迎大家访问我的blog，有更精彩的文章吆！

React之渲染元素相关推荐

react 中渲染html_如何在React中识别和解决浪费的渲染
react 中渲染html by Nayeem Reza 通过Nayeem Reza 如何在React中识别和解决浪费的渲染 (How to identify and resolve wasted r ...
react控制组件中元素_React Interview问题：浏览器，组件或元素中呈现了什么？
react控制组件中元素 by Samer Buna 通过Samer Buna React Interview问题:浏览器,组件或元素中呈现了什么? (React Interview Question ...
[react] 什么渲染劫持？
[react] 什么渲染劫持? 首先,什么是渲染劫持:渲染劫持的概念是控制组件从另一个组件输出的能力,当然这个概念一般和react中的高阶组件(HOC)放在一起解释比较有明了. 高阶组件可以在rend ...
web前端高级React - React从入门到进阶之React条件渲染
系列文章目录第一章:React从入门到进阶之初识React 第一章:React从入门到进阶之JSX简介第三章:React从入门到进阶之元素渲染第四章:React从入门到进阶之JSX虚拟DOM渲染 ...
React 重新渲染指南
前言老早就想写一篇关于React渲染的文章,这两天看到一篇比较不错英文的文章,翻译一下(主要是谷歌翻译,手动狗头),文章底部会附上原文链接. 介绍 React 重新渲染的综合指南.该指南解释了什么是 ...
react 条件渲染_React中的条件渲染语法
react 条件渲染为什么我们不能使用If-Else以及三元运算符如何提供帮助 (Why We Can't Use If-Else and How the Ternary Operator can ...
react 嵌套渲染_React 中嵌套数组数据如何渲染到前端页面
现在有后端提供的类似下面这种格式的数据 { status:X, body: [ {year: 2017, month: [December, October, ...]} {year: 2016, m ...
React + TypeScript：元素引用的传递
React 中需要操作元素时,可通过 findDOMNode() 或通过 createRef() 创建对元素的引用来实现.前者官方不推荐,所以这里讨论后者及其与 TypeScript 结合时如何工作. ...
[react] 说说你对React的渲染原理的理解
[react] 说说你对React的渲染原理的理解 1.单向数据流.React是一个MVVM框架,简单来说是在MVC的模式下在前端部分拆分出数据层和视图层.单向数据流指的是只能由数据层的变化去影响视图 ...

React之渲染元素