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树上，视图就更新了

Diff算法

当你使用React的时候，在某个时间点 render() 函数创建了一棵React元素树，

在下一个state或者props更新的时候，render() 函数将创建一棵新的React元素树，

React将对比这两棵树的不同之处，计算出如何高效的更新UI（只更新变化的地方）

 

Diff算法的说明 - 1

* 如果两棵树的根元素类型不同，React会销毁旧树，创建新树

// 旧树
<div>
  <Counter /></div>
// 新树
<span>
  <Counter /></span>
执行过程：destory Counter -> insert Counter

Diff算法的说明 - 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属性

Diff算法的说明 - 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

* 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 属性

为了解决以上问题，React提供了一个 key 属性。当子节点带有key属性，React会通过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' 仅仅移动位置即可

* 说明：key属性在React内部使用，但不会传递给你的组件

* 推荐：在遍历数据时，推荐在组件中使用 key 属性：<li key={item.id}>{item.name}</li>

* 注意：key只需要保持与他的兄弟节点唯一即可，不需要全局唯一

* 注意：尽可能的减少数组index作为key，数组中插入元素的等操作时，会使得效率底下

---

---

                                                                        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'))

createElement()的问题

* 说明：createElement()方式，代码编写不友好，太复杂

var dv = React.createElement(
  "div",
  { className: "shopping-list" },
  React.createElement(
    "h1",
    null,
    "Shopping List for "
  ),
  React.createElement(
    "ul",
    null,
    React.createElement(
      "li",
      null,
      "Instagram"
    ),
    React.createElement(
      "li",
      null,
      "WhatsApp"
    )
  )
)
// 渲染
ReactDOM.render(dv, document.getElementById('app'))

JSX 的基本使用

* 注意：JSX语法，最终会被编译为 createElement() 方法

* 推荐：使用 JSX 的方式创建组件

* JSX - JavaScript XML

* 安装：npm i -D babel-preset-react （依赖与：babel-core/babel-loader）

注意：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属性，使用htmlFor代替

* 注意 2：在 JSX 中可以直接使用 JS代码，直接在 JSX 中通过 {} 中间写 JS代码即可

* 注意 3：在 JSX 中只能使用表达式，但是不能出现 语句！！！

* 注意 4：在 JSX 中注释语法：{/* 中间是注释的内容 */}

React组件

React 组件可以让你把UI分割为独立、可复用的片段，并将每一片段视为相互独立的部分。

* 组件是由一个个的HTML元素组成的

* 概念上来讲, 组件就像JS中的函数。它们接受用户输入（props），并且返回一个React对象，用来描述展示在页面中的内容

React创建组件的两种方式

* 1 通过 JS函数 创建（无状态组件）

* 2 通过 class 创建（有状态组件）

函数式组件 和 class 组件的使用场景说明：

1 如果一个组件仅仅是为了展示数据，那么此时就可以使用 函数组件

2 如果一个组件中有一定业务逻辑，需要操作数据，那么就需要使用 class 创建组件，因为，此时需要使用 state

JavaScript函数创建

* 注意：1 函数名称必须为大写字母开头，React通过这个特点来判断是不是一个组件

* 注意：2 函数必须有返回值，返回值可以是：JSX对象或null

* 注意：3 返回的JSX，必须有一个根元素

* 注意：4 组件的返回值使用()包裹，避免换行问题

function Welcome(props) {
  return (
    // 此处注释的写法
    <div className="shopping-list">
      {/* 此处 注释的写法 必须要{}包裹 */}
      <h1>Shopping List for {props.name}</h1>
      <ul>
        <li>Instagram</li>
        <li>WhatsApp</li>
      </ul>
    </div>
  )
}
 
ReactDOM.render(
  <Welcome name="jack" />,
  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>
    )
  }
}