React特性与简介

React

用于构建用户界面的 JavaScript 库

通过使用jsx创建虚拟DOM映射真实DOM来减少页面的重绘重排

虚拟DOM

以前操作dom的方式是通过document.getElementById()的方式

这样的过程实际上是先去读取html的dom结构，将结构转换成变量，再进行操作

而reactjs定义了一套变量形式的dom模型，一切操作和换算直接在变量中

这样减少了操作真实dom，性能相当高，和主流MVC框架有本质的区别，并不和dom打交道

JSX

React 使用 JSX 来替代常规的 JavaScript

JSX 是一个看起来很像 XML 的 JavaScript 语法扩展

jsx是一个表达式

在jsx里面可以使用 { } 引入一个表达式

在jsx当中节点属性要使用关键字时需要替换
class属性要写成className — className的绑定会覆盖原有的class属性
for属性要写成htmlFor — label标签的for属性替换成htmlFor

style的绑定可以是一个对象的值，遇到传统的需要-的样式改写成驼峰的形式（fontSize）

{ } 引入对象要注意不能是一个子节点

jsx当中 使用{/*} {*/}来注释代码

布尔值null undefined 在 { } 在界面中不渲染

如果 { } 引入的是一个数组 那么数组里面的内容就会依次渲染

如果 { } 数组的成员是jsx 那么就需要保证每个jsx根节点都要绑定一个key的属性等于一个唯一值
目的是提升react的工作效率

在jsx当中可以给节点绑定事件 绑定事件的方式为on+事件名（驼峰写法onInput）
它的值只能是函数 — 函数得到的第一个参数是event

定义虚拟DOM时 不要用引号

jsx中只能有一个根标签

标签必须闭合

标签首字母
若为小写 会将该标签转为html的同名元素
若大写会渲染对应的组件

diff算法

在React中使用JSX中如果在节点中放入一个数组 那么会自动遍历渲染到页面结构

此时循环生成的结构中必须需要key属性 值为一个唯一的值 为了列表的复用和重拍 提升性能

如果没有设置key 在遍历生成的结构发生改变时

React需要将修改前的虚拟DOM与修改后的虚拟DOM一一比对（1 --> 1 , 2 --> 2 …）

将需要修改的虚拟DOM修改后映射到真实DOM

如果设置了唯一的key属性 React进行虚拟DOM比对时会直接将key相同的虚拟DOM进行比对

修改后映射到真实DOM 提升渲染效率

React Fiber算法

在react 16之后发布的一种react 核心算法，React Fiber是对核心算法的一次重新实现，之前用的是diff算法。

在之前React中，更新过程是同步的，这可能会导致性能问题。

当React决定要加载或者更新组件树时，会做很多事

比如调用各个组件的生命周期函数，计算和比对Virtual DOM，最后更新DOM树

这整个过程是同步进行的，也就是说只要一个加载或者更新过程开始，中途不会中断。

因为JavaScript单线程的特点，如果组件树很大的时候，每个同步任务耗时太长，就会出现卡顿。

React Fiber的方法其实很简单——分片。

把一个耗时长的任务分成很多小片，每一个小片的运行时间很短

虽然总时间依然很长，但是在每个小片执行完之后，都给其他任务一个执行的机会

这样唯一的线程就不会被独占，其他任务依然有运行的机会。