1.什么是React

React 背景介绍

React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。到编写本文时已经是16.4.0版本。React的出现带来了疯狂般的前端热潮，陆续有很多后端、全栈工程师也进入前端行列。

什么是React

• A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES
  • 用来构建UI的 JavaScript库
  • React 不是一个 MVC 框架，仅仅是视图（V）层的库
• React 官网
• React 中文文档

特点

• 使用 JSX语法 创建组件，实现组件化开发，为函数式的 UI 编程方式打开了大门
• 性能高的让人称赞：通过 diff算法 和 虚拟DOM 实现视图的高效更新
• HTML仅仅是个开始

> JSX --TO--> EveryThing

- JSX --> HTML
- JSX --> native ios或android中的组件（XML）
- JSX --> VR
- JSX --> 物联网

为什么要用React

• 使用组件化开发方式，符合现代Web开发的趋势
• 技术成熟，社区完善，配件齐全，适用于大型Web项目（生态系统健全）
• 由Facebook专门的团队维护，技术支持可靠
• ReactNative 使用React语法构建原生App的衍生框架 - Learn once, write anywhere: Build mobile apps with React
• 使用方式简单，性能非常高，支持服务端渲染
• React非常火，从技术角度，可以满足好奇心，提高技术水平；从职业角度，有利于求职和晋升，有利于参与潜力大的项目

React中的核心概念

• 虚拟DOM（Virtual DOM）
• Diff算法（虚拟DOM的加速器，提升React性能的法宝）

虚拟DOM（Vitural DOM）

React将DOM抽象为虚拟DOM，虚拟DOM其实就是用一个对象来描述DOM，通过对比前后两个对象的差异，最终只把变化的部分重新渲染，提高渲染的效率

为什么用虚拟dom，当dom反生更改时需要遍历 而原生dom可遍历属性多大231个 且大部分与渲染无关 更新页面代价太大

• 如何实现一个 Virtual DOM 算法
• 理解 Virtual DOM

VituralDOM的处理方式

• 用 JavaScript 对象结构表示 DOM 树的结构，然后用这个树构建一个真正的 DOM 树，插到文档当中
• 当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异
• 把2所记录的差异应用到步骤1所构建的真正的DOM树上，视图就更新了

Diff算法

当你使用React的时候，在某个时间点 render() 函数创建了一棵React元素树， 在下一个state或者props更新的时候，render() 函数将创建一棵新的React元素树，React将对比这两棵树的不同之处，计算出如何高效的更新UI（只更新变化的地方）