React中的核心概念
1.虚拟DOM
2.Diff算法(虚拟dom的加速器，提升react性能的法宝)
虚拟DOM
react酱DOM抽象为虚拟dom，虚拟dom其实就是用一个对象来描述DOM，通过对比前后两个对象的差异，最终只把变化的部分重新渲染，提升渲染的效率。
为什么用虚拟dom？
当dom发生更改时需要遍历，而原生dom可遍历属性多达231个，且大部分与渲染五官，更新页面代价太大。
虚拟dom的处理方式？
1 用 JavaScript 对象结构表示 DOM 树的结构，然后用这个树构建一个真正的 DOM 树，插到文档当中
2当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异
3把2所记录的差异应用到步骤1所构建的真正的DOM树上，视图就更新了
Diff算法
当你使用React的时候，在某个时间点 render() 函数创建了一棵React元素树，在下一个state或者props更新的时候，render() 函数将创建一棵新的React元素树，React将对比这两棵树的不同之处，计算出如何高效的更新UI（只更新变化的地方）
Diff算法说明：
1：如果两棵树的根元素类型不同，React会销毁旧树，创建新树。
// 旧树
<div>
<Counter />
</div>
// 新树
<span>
<Counter />
</span>
执行过程：destory Counter -> insert Counter
根元素 div ⇒ span 直接销毁整个dom树，重新创建新树。
2：对于类型相同的React DOM 元素，React会对比两者的属性是否相同，只更新不同的属性，当处理完这个DOM节点，React就会递归处理子节点。
// 旧
<div className="before" title="stuff" />
// 新
<div className="after" title="stuff" />
只更新：className 属性
// 旧
<div style={
{
color: 'red', fontWeight: 'bold'}} />
// 新
<div style={
{
color: 'green', fontWeight: 'bold'}} />
只更新：color属性
当节点相同时候，会比较属性，会进行一个属性更新的操作。
3：1 当在子节点的后面添加一个节点，这时候两棵树的转化工作执行的很好。
// 旧
<ul>
<li>first</li>
<li>second</li>
</ul>
// 新
<ul>
<li>first</li>
<li>second</li>
<li>third</li>
</ul>
执行过程：
React会匹配新旧两个<li>first</li>，匹配两个<li>second</li>，然后添加 <li>third</li> tree
父级标签判断完成后，会子级逐个进行比较，对没有的进行新增操作。
3：2 但是如果你在开始位置插入一个元素，那么问题就来了。
// 旧
<ul>
<li>Duke</li>
<li>Villanova</li>
</ul>
// 新
<ul>
<li>Connecticut</li>
<li>Duke</li>
<li>Villanova</li>
</ul>
在没有key属性时执行过程：
React将改变每一个子删除重新创建，而非保持 <li>Duke</li> 和 <li>Villanova</li> 不变
将不同的之间删除，然后新增，一直持续持续操作。
key属性
为了解决上面的问题，增加了 key属性
// 旧
<ul>
<li key="2015">Duke</li>
<li key="2016">Villanova</li>
</ul>
// 新
<ul>
<li key="2014">Connecticut</li>
<li key="2015">Duke</li>
<li key="2016">Villanova</li>
</ul>
执行过程：
现在 React 知道带有key '2014' 的元素是新的，对于 '2015' 和 '2016' 仅仅移动位置即可
对没有的dom进行新增操作，对已经有的进行移动操作。
1：key属性在React内部使用，但是不会传递给组件。
2：推荐：在遍历的时候，推荐给组件中使用key属性，绑定唯一key值。
3：注意：key只需要保持与他自己的兄弟节点位移即可，不需要全局唯一。
4：尽可能的减少数组的index作为key，数组中插入的元素的等操作时，会效率低下。
React的基本使用
需要安装 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'))
使用react上的创建元素的方法创建虚拟dom，使用react-dom上的render方法，将虚拟dom渲染到真实dom上。
由于react.createElment的创建方式不太友好，所以诞生了jsx的形式来实现虚拟dom。
JSX 的基本使用
jsx语法最终还是会被编译成createElement()方法。
JSX-javascript xml
安装
npm i -D babel-preset-react
jsx语法需要babel-preset-react编译后，才能被解析执行
/* 1 在 .babelrc 开启babel对 JSX 的转换 */
{
"presets": [
"env", "react"
]
}
/* 2 webpack.config.js */
module: [
rules: [
{
test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },
]
]
/* 3 在 js 文件中 使用 JSX */
const dv = (
<div title="标题" className="cls container">Hello JSX!</div>
)
/* 4 渲染 JSX 到页面中 */
ReactDOM.render(dv, document.getElementById('app'))
jsx注意点：
1：如果在jsx中给元素加类名，需要使用className替代class,label中的for使用hemlFor替代
2：在jsx中直接使用js代码，直接在jsx中通过{}中间写js代码即可
3：在jsx中只能使用表达式，但是不能出出现语句
4：在jsx中注释 ：{/注释语句/}
React组件
react组件可以吧UI分割为独立、可复用的片段，并将每一片段视为独立的部分。
组件是由一个个的HTML元素组成的。
概念上来讲，组件就像JS中的函数，他们接受用户输入(props)，并且返回一个React对象，用来描述展示在页面中的内容。
React创建组件的两种形式
1：通过js函数创建 无状态组件
2：通过class创建 有状态组件
函数式组件和calss组件的使用场景：
1：如果一个组件仅仅为了展示数据那么此时就可以使用函数组件
2：如果一个组件中有一定的业务逻辑，需要操作数据，那么就需要使用class创建组件，因为此时需要使用state.
js函数创建组件
1：函数名称必须为大写字母开头,React通过这个特点判断是不是一个组件。
2：函数必须有返回值，返回值可以是jsx对象或者null
3：返回jsx，只能有一个根元素
4：组件的返回值使用()包裹，避免换行问题。
function Amyfun(){
return (
<div className="zjq">
我是一个函数组件，我的name是{
props.name}
</div>
)
}
ReactDOM.render(
<Amyfun name="zjq" />,
document.getElementById('app')
)
class创建组件
在es6中class仅仅是一个语法糖，不是真正的类，本质上还是构造函数+原型 实现继承
// ES6中class关键字的简单使用
// - **ES6中的所有的代码都是运行在严格模式中的**
// - 1 它是用来定义类的，是ES6中实现面向对象编程的新方式
// - 2 使用`static`关键字定义静态属性
// - 3 使用`constructor`构造函数，创建实例属性
// - [参考](http://es6.ruanyifeng.com/#docs/class)
// 语法：
class Person {
// 实例的构造函数 constructor
constructor(age){
// 实例属性
this.age = age
}
// 在class中定义方法 此处为实例方法 通过实例打点调用
sayHello () {
console.log('大家好，我今年' + this.age + '了');
}
// 静态方法 通过构造函数打点调用 Person.doudou()
static doudou () {
console.log('我是小明，我新get了一个技能，会暖床');
}
}
// 添加静态属性
Person.staticName = '静态属性'
// 实例化对象
const p = new Person(19)
// 实现继承的方式
class American extends Person {
constructor() {
// 必须调用super(), super表示父类的构造函数
super()
this.skin = 'white'
this.eyeColor = 'white'
}
}
// 创建react对象
// 注意：基于 `ES6` 中的class，需要配合 `babel` 将代码转化为浏览器识别的ES5语法
// 安装：`npm i -D babel-preset-env`
// react对象继承字React.Component
class ShoppingList extends React.Component {
constructor(props) {
super(props)
}
// class创建的组件中 必须有rander方法 且显示return一个react对象或者null
render() {
return (
<div className="shopping-list">
<h1>Shopping List for {
this.props.name}</h1>
<ul>
<li>Instagram</li>
<li>WhatsApp</li>
</ul>
</div>
)
}
}
