React入门----基础篇
React 背景介绍
React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。
特点
- 1 使用 JSX语法 创建组件，实现组件化开发，为函数式的 UI 编程方式打开了大门
- 2 性能高的让人称赞：通过
diff算法和虚拟DOM实现视图的高效更新 - 3 HTML仅仅是个开始
为什么要用React
- 1 使用
组件化开发方式，符合现代Web开发的趋势 - 2 技术成熟，社区完善，配件齐全，适用于大型Web项目（生态系统健全）
- 3 由Facebook专门的团队维护，技术支持可靠
- 4 ReactNative - Learn once, write anywhere: Build mobile apps with React
- 5 使用方式简单，性能非常高，支持服务端渲染
- 6 React非常火，从技术角度，可以满足好奇心，提高技术水平；从职业角度，有利于求职和晋升，有利于参与潜力大的项目
React中的核心概念
- 1 虚拟DOM（Virtual DOM）
- 2 Diff算法（虚拟DOM的加速器，提升React性能的法宝）
虚拟DOM（Vitural DOM）
React将DOM抽象为虚拟DOM，虚拟DOM其实就是用一个对象来描述DOM，通过对比前后两个对象的差异，最终只把变化的部分重新渲染，提高渲染的效率
为什么用虚拟dom，当dom反生更改时需要遍历 而原生dom可遍历属性多大231个 且大部分与渲染无关 更新页面代价太大
VituralDOM的处理方式
- 1 用 JavaScript 对象结构表示 DOM 树的结构，然后用这个树构建一个真正的 DOM 树，插到文档当中
- 2 当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异
- 3 把2所记录的差异应用到步骤1所构建的真正的DOM树上，视图就更新了
React的基本使用
- 安装：
npm i -S react react-dom react：react 是React库的入口点react-dom：提供了针对DOM的方法，比如：把创建的虚拟DOM，渲染到页面上
// 1\. 导入 react import React from 'react' import ReactDOM from 'react-dom' // 2\. 创建 虚拟DOM // 参数1：元素名称 参数2：元素属性对象(null表示无) 参数3：当前元素的子元素string||createElement() 的返回值 const divVD = React.createElement('div', { title: 'hello react' }, 'Hello React！！！') // 3\. 渲染 // 参数1：虚拟dom对象 参数2：dom对象表示渲染到哪个元素内 参数3：回调函数 ReactDOM.render(divVD, document.getElementById('app'))
