1.Virtual DOM（虚拟dom）

为什么要使用虚拟dom呢
1.dom渲染在渲染中是最昂贵的，尽量减少dom操作，举个例子在jquery中，可能只是table的第二行数据改变了，但是还是需要append全部（因为有可能别的行也会变，但是实际只有第二行的一个数变了，所以你得append全部），避免“推到重来”，项目越复杂，影响越严重
2.js运行效率高

<div class='box' id='content'>
  <div class='title'>Hello</div>
  <button>Click</button>
</div>

每个 DOM 元素的结构都可以用 JavaScript 的对象来表示。你会发现一个 DOM 元素包含的信息其实只有三个：标签名，属性，子元素。

{
  tag: 'div',
  attrs: { className: 'box', id: 'content'},
  children: [
    {
      tag: 'div',
      arrts: { className: 'title' },
      children: ['Hello']
    },
    {
      tag: 'button',
      attrs: null,
      children: ['Click']
    }
  ]
}

下面对比一下真实dom和虚拟dom的区别
比如我们要生成一个有href和title属性的内容为React的a元素

image.png

如下是使用原生DOM生成的元素：

var a = document.createElement('a')
a.setAttribute('class', 'link')
a.setAttribute('href', 'https://github.com/facebook/react')
a.appendChild(document.createTextNode('React'))

那么使用虚拟DOM（我们要明白一点，虚拟dom是我们写的react UI代码经过jsx转化后样子，我们平常是不写虚拟dom）则代码为如下：

var a = React.createElement('a'（这里是标签名）, {
    className: 'link',
    href: 'https://github.com/facebook/react'
}（这里是属性）, 'React'（这里是子元素）)

把jsx语法转换为虚拟dom的是react的createElement方法

在React的实际开发中，UI会根据数据的不同进行展示,当数据变化时，React会重新构建整个DOM树，然后将当前的DOM树和之前的比较，得到DOM树的区别，然后仅仅把变化的部分反映到实际的浏览器UI更新上。
也正是由于虚拟dom，UI会根据数据的不同进行不同的展示，成为数据驱动型

2.jsx语法

首先让我们来看下面这段代码

const element=<div className=”title”>
                  Hello<span>world!</span>
              </div>

好多人感觉这段代码是错误的，从js角度来说这的确是错误的。其实这是jsx语法，jsx能使这种写法得到支持。为什么要使用这种语法，我们知道dom操作非常耗费性能，所以我们决定放弃使用dom操作，而使用js对象去渲染界面。每一个dom元素包含的信息其实只有三个：“标签名，属性，子元素”，这就是jsx诞生的作用，用来将html转化为js对象

上面这段代码编译以后会把类似于html的jsx结构，转化为js结构，也就是以下的形式

Var element=React.createElement(
‘div’,
{className:’title’},
‘hello’,
React.createElement(
‘span’,
{},
world
)

)

jsx语法里面支持表达式

const a="world";
const element=<div className=”title”>
                  Hello<span>{a}!</span>
              </div>

所以也就成了一种模板，区别于其他模板的是，元素上并没有许多难懂的属性，可以让新手快速上手

3.key的运用

react利用key来识别组件，它是一种身份标识，就像我们的身份证用来辨识一个人一样。
为什么要有key，我们来用表格的数据来讲解，比如后台返回了100条数据，每个数据都有一个id，代表唯一的身份，我们拿来做key值。当我们添加一条数据的时候，那么数据渲染的时候，只会渲染这第一条，后面的不会渲染，因为后面的key值都没有变，这样子就大大的提高了渲染效率

1.key的值要稳定唯一

请使用后台返回的id（id是数据库生成的唯一主键）去写，这样每个值有对应的key

注意不要使用Math.Random()或者new Date（）去写，这样每次都会销毁重新加载组件的，很浪费性能

2.index作为key是一种反模式

不要使用index作为key（如果用index作为key值，添加一条数据，添加的这条在第一个，以前的第一变成了第二，以此类推，那么所有的数据的key值都会改变，都会被渲染，就会变得异常吃力）

不过key值的唯一是有范围的，即在数组生成的同级同类型的组件上要保持唯一，而不是所有组件的key都要保持唯一

4.diff算法（摘自https://juejin.im/post/5b3658f0518825522609e4c0?utm_source=tuicool&utm_medium=referral）

5.高阶组件

6.一切都是组件

7.生命周期

8.复用性高

把所有功能写成一个类，这样就可以直接复制过去