From d9bf6cab52d4be06811a6a5a933e238d1290d14e Mon Sep 17 00:00:00 2001 From: qianguyihao Date: Sun, 10 Feb 2019 13:08:54 +0800 Subject: [PATCH] =?UTF-8?q?update=EF=BC=9Areact=E4=BB=8B=E7=BB=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 13-React基础/01-React介绍.md | 148 ++++++++++++++++++++++++++--------- 1 file changed, 113 insertions(+), 35 deletions(-) diff --git a/13-React基础/01-React介绍.md b/13-React基础/01-React介绍.md index 8a2d7cd..5cbc00c 100644 --- a/13-React基础/01-React介绍.md +++ b/13-React基础/01-React介绍.md @@ -1,6 +1,61 @@ + +## 虚拟DOM和diff算法 + +> 在学习 React 之前，我们需要先了解两个概念：虚拟DOM、diff算法。 + + + +### 虚拟DOM + +**问题描述**： + +假设我们的数据发生一点点的变化，也会被强制重建整颗DOM树，这么做，会涉及到很多元素的重绘和重排，导致性能浪费严重。 + +**解决上述问题的思路**： + +实现按需更新页面上的元素即可。也就是说，把 需要修改的元素，所对应的 DOM 元素重新构建；其他没有变化的数据，所对应的 DOM 节点不需要被强制更新。 + +**具体实现方案**：（如何按需更新页面上的元素） + +只需要拿到 页面更新前的 内存中的DOM树，同时再拿到 页面更新前的 新渲染出来的 内存DOM树；然后，对比这两颗新旧DOM树，找到那些需要被重新创建和修改的元素即可。这样就能实现 DOM 的**按需更新**。 + + +**如何拿到这两棵DOM树**：（即：如何从浏览器的内存住哪个获取到 浏览器私有的那两颗DOM树？） + +如果要拿到浏览器私有的DOM树，那我们必须调用浏览器提供的相关JS的API才行。但是问题来了，浏览器并没有提供这样的API。既然如此，那我们可以自己**模拟**这两颗 新旧DOM树。 + +**如何自己模拟这两颗 新旧DOM树**：（即：如何自己模拟一个DOM节点？） + +这里涉及到手动模拟DOM树的原理：使用 JS 创建一个对象，用和这个对象来模拟每一个DOM节点；然后在每个DOM节点中，又提供了类似于 children 这样的属性来描述当前DOM的子节点。这样的话，当DOM节点形成了嵌套关系，就模拟出了一颗 DOM 树。 + + +**总结**： + +- 虚拟DOM的**本质**：使用 JS 对象模拟DOM树。 + +- 虚拟DOM的**目的**：为了实现 DOM 节点的高效更新。 + +React内部已经帮我们实现了虚拟DOM，初学者掌握如何调用即可。 + + +### diff算法 + +怎么实现 两颗新旧DOM树的对比 呢？这里就涉及到了 diff算法。常见的 diff算法如下： + + - tree diff：新旧DOM树，逐层对比的方式，就叫做 tree diff。每当我们从前到后，把所有层的节点对比完后，必然能够找到那些 需要被更新的元素。 + + - component diff：在对比每一层的时候，组件之间的对比，叫做 component diff。当对比组件的时候，如果两个组件的类型相同，则暂时认为这个组件不需要被更新，如果组件的类型不同，则立即将旧组件移除，新建一个组件，替换到被移除的位置。 + + - element diff：在组件中，每个元素之间也要进行对比，那么，元素级别的对比，叫做 element diff。 + + - key：key这个属性，可以把 页面上的 DOM节点 和 虚拟DOM中的对象，做一层关联关系。 + + +如何对比两颗新旧 + ## React 介绍 ### React 是什么 @@ -81,21 +136,21 @@ - 谁去干活儿不关心 +## React 环境搭建：写第一个Hello World -## Hello World +### react.js 和 react-dom.js +为了通过 React 写一个Hello World程序，我们需要先安装几个包： -### 引入相关的js库 +- react.js: React的核心库。这个包，是专门用来创建React组件、组件生命周期等。 -为了通过 React 写一个Hello World程序，我们需要先引入以下 JS 库： - -- react.js: React的核心库 - -- react-dom.js: 提供操作DOM的扩展库 +- react-dom.js: 操作DOM的扩展库。这个包，主要封装了和 DOM 操作相关的包（比如，把组件渲染到页面上）。 - babel.min.js: 解析JSX语法代码转为纯JS语法代码的库 +### 方式一：本地引入相关的js库 +入门的时候，我们建议采取方式一。 如果是本地引入的话，可以这样写： @@ -107,10 +162,9 @@ ``` - 如果是通过CDN的方式引入的话，可以使用网站 提供的CDN链接。 -### 代码举例 +**完整代码举例**： ```html @@ -133,19 +187,19 @@ ``` - 代码运行后，页面上的DOM结构如下： ```html @@ -159,52 +213,76 @@ render的中文含义是“渲染”。render 方法的语法如下： - ```javascript - ReactDOM.render(虚拟DOM对象, container); + ReactDOM.render(要渲染的虚拟DOM对象, 容器 container：要渲染到页面上的哪个位置); ``` +【工程文件下载】 + +- [2019-02-08-ReactDemo.zip](https://download.csdn.net/download/smyhvae/10951736) +### 方式二：npm install +实际开发中，我们一般都是通过 npm install 的方式来安装 react 相关的包。 -```javascript +首先，新建一个空的文件夹`2019-02-08-ReactDemo`，作为项目的根目录。然后在根目录下执行如下命令，进行**项目初始化**： + +``` + npm init --yes +``` + +上方命令执行完成后，会生成`package.json`文件。 + +然后继续执行如下命令，安装 react.js 和 react-dom.js 这两个包： + +``` + npm i react react-dom +``` + +完整代码举例： + +index.html: + +``` ``` +main.js: ```javascript +// JS打包入口文件 +import React from 'react' +import ReactDOM from 'react-dom' + +// 在 react 中，如要要创建 DOM 元素，只能使用 React 提供的 JS API 来创建，不能【直接】像 Vue 中那样，手写 HTML 元素 +// React.createElement() 方法，用于创建 虚拟DOM 对象，它接收 3个及以上的参数 +// 参数1： 是个字符串类型的参数，表示要创建的元素类型 +// 参数2： 是一个属性对象，表示 创建的这个元素上，有哪些属性 +// 参数3： 从第三个参数的位置开始，后面可以放好多的虚拟DOM对象，这写参数，表示当前元素的子节点 + +//
这是一个div
+var myDiv = React.createElement('div', { title: 'this is a div', id: 'mydiv' }, '这是一个div'); + +// ReactDOM.render('要渲染的虚拟DOM元素', '要渲染到页面上的哪个位置'); +ReactDOM.render(myDiv, document.getElementById('app')); ``` +【工程文件下载】 -```javascript - -``` +- [2019-02-09-ReactDemo.zip](https://download.csdn.net/download/smyhvae/10951196) +## 我的公众号 +想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。 -```javascript - -``` - - - - -```javascript - -``` - - - - -```javascript - -``` +扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外： +![](http://img.smyhvae.com/20160401_01.jpg)