React 是一个用于构建用户界面的 JavaScript 库。
通过 npm 使用 React
1.安装Node.js 和 npm
通过 node -v 命令查看本机是否安装,如果没有安装,参考node.js安装指南 根据电脑系统环境进行安装。
国内使用 npm 速度很慢,你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:
npm install -g cnpm --registry=https://registry.npm.taobao.org
npm config set registry https://registry.npm.taobao.org
这样就可以使用 cnpm 命令来安装模块了:
cnpm install [name]
2.使用 create-react-app 快速构建 React 开发环境
create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境。
create-react-app 自动创建的项目是基于 Webpack + ES6 。
执行以下命令创建项目:
cnpm install -g create-react-app
create-react-app my-app
cd my-app/
npm start
在浏览器中打开 http://localhost:3000/ ,结果如下图所示:
React 的核心概念
1.虚拟 DOM
DOM的本质是什么:
在浏览器中的概念,用JS对象来表示 页面上的元素,并提供了操作DOM对象的API。
什么是React 中的虚拟DOM:
是框架中的概念,是程序员用 JS 对象来模拟页面上的 DOM 和 DOM 嵌套。
为什么要实现虚拟DOM:
为了实现页面中,DOM 元素的高效更新。
2.Diff 算法
tree diff :
新旧两棵 DOM 树,逐层对比的过程。当整颗 DOM 逐层对比完毕,则所有需要被按需更新的元素,必然能够找到。
component diff :
在进行Tree Diff 的时候,每一层中,组件级别的对比。如果对比前后 组件的类型相同,则暂时认为此组件不需要被更新;组件的类型不同,则需要移除旧组件,创建新组建,并追加到页面上;
element diff:
在进行组件对比的时候,如果两个组件类型相同,则需要进行元素级别的对比。