React知识小碎片

React中keys的作用

key是react中使用的一种特殊的属性，用于追踪哪些列表中的元素被修改、被添加或者被移除的辅助标识。因此在渲染列表的时候要为列表中的每一项添加一个key作为唯一的标识符。

调用setState之后发生了什么？

调用setState函数之后，React会将传入的参数对象和组件当前状态进行合并，调和过后根据新的状态构建React元素树并重新渲染整个UI界面。

React生命周期三个阶段

初始渲染阶段：这是组件即将开始其生命之旅并进入 DOM 的阶段。
更新阶段：一旦组件被添加到 DOM，它只有在 prop 或状态发生变化时才可能更新和重新渲染。这些只发生在这个阶段。
卸载阶段：这是组件生命周期的最后阶段，组件被销毁并从 DOM 中删除。

React生命周期函数

1.初始化阶段

getDefaultProps —— 获取实例的默认属性
getInitialState —— 获取每个实例的初始化状态
componentWillMount —— 组件即将被装载、渲染到页面上
render —— 组件在这里生成虚拟的DOM节点
componentDidMount —— 组件被装载之后

2.运行中阶段

componentWillReceiveProps —— 组件将要接收到属性的时候调用
shouldComponentUpdate —— 组件接收到新属性或者新状态的时候
componentWillUpdate —— 组件即将更新不能修改属性和状态
render —— 组件重新渲染
componentDidUpdate —— 组件已经更新

3.销毁阶段

componentWillUnmount —— 组件即将销毁

shouldComponentUpdate是做什么的？

shouldComponentUpdate这个方法用来判断是否需要调用render方法重新绘制dom。因为dom的绘制非常消耗性能，如果能在shouldComponentUpdate方法中写出更优化的dom diff算法，可以极大提高性能。（可以在shouleComponentUpdate生命周期函数中进行react性能优化）

为什么虚拟dom会提高性能

虚拟dom相当于在js和真是dom中间加了一个缓存，利用dom diff算法避免了没有必要的dom操作，不会随时刷新整个页面，而只对界面上真正发生变化的部分进行实际的dom操作，从而提高性能。
虚拟DOM的原理：
React会在内存中维护一个虚拟DOM树，对这个树进行读或写，实际上是对虚拟DOM进行。当数据变化时，React会自动更新虚拟DOM，然后将新的虚拟DOM和旧的虚拟DOM进行对比，找到变更的部分，得出一个diff，然后将diff放到一个队列里，最终批量更新这些diff到DOM中。

React diff原理

策略一（tree diff）：
Web UI中DOM节点跨层级的移动操作特别少，可以忽略不计。

策略二（component diff）：
拥有相同类的两个组件 生成相似的树形结构，
拥有不同类的两个组件 生成不同的树形结构。

策略三（element diff）：
对于同一层级的一组子节点，通过唯一id区分。

tree diff
（1）React通过updateDepth对Virtual DOM树进行层级控制。
（2）对树分层比较，两棵树 只对同一层次节点 进行比较。如果该节点不存在时，则该节点及其子节点会被完全删除，不会再进一步比较。
（3）只需遍历一次，就能完成整棵DOM树的比较。

component diff
React对不同的组件间的比较，有三种策略
（1）同一类型的两个组件，按原策略（层级比较）继续比较Virtual DOM树即可。
（2）同一类型的两个组件，组件A变化为组件B时，可能Virtual DOM没有任何变化，如果知道这点（变换的过程中，Virtual DOM没有改变），可节省大量计算时间，所以 用户 可以通过 shouldComponentUpdate() 来判断是否需要 判断计算。
（3）不同类型的组件，将一个（将被改变的）组件判断为dirty component（脏组件），从而替换 整个组件的所有节点。

element diff
当节点处于同一层级时，diff提供三种节点操作：删除、插入、移动。
插入：组件 C 不在集合（A,B）中，需要插入
删除：（1）组件 D 在集合（A,B,D）中，但 D的节点已经更改，不能复用和更新，所以需要删除 旧的 D ，再创建新的。
（2）组件 D 之前在 集合（A,B,D）中，但集合变成新的集合（A,B）了，D 就需要被删除。
移动：组件D已经在集合（A,B,C,D）里了，且集合更新时，D没有发生更新，只是位置改变，如新集合（A,D,B,C），D在第二个，无须像传统diff，让旧集合的第二个B和新集合的第二个D 比较，并且删除第二个位置的B，再在第二个位置插入D，而是 （对同一层级的同组子节点） 添加唯一key进行区分，移动即可。

参考文章链接：https://www.jianshu.com/p/3ba0822018cf

React的 ref

Ref是React一种特殊的属性 ，可以用来绑定到 render() 输出的任何组件上。
绑定一个 ref 属性到 render 的返回值上，在其它代码中，通过 this.refs 获取支撑实例。

允许引用 render() 返回的相应的支撑实例。这样就可以确保在任何时间总是拿到正确的实例。

JSX

JSX， 一种 JavaScript 的语法扩展。

React组件

将项目中的页面按照功能（或者是位置等等）划分为一个个块。
组件是 React 应用 UI 的构建块。这些组件将整个 UI 分成小的独立并可重用的部分。每个组件彼此独立，而不会影响 UI 的其余部分。

React props 与 state

State 是一种数据结构，用于组件挂载时所需数据的默认值。State 可能会随着时间的推移而发生突变，但多数时候是作为用户事件行为的结果。

Props(properties 的简写)则是组件的配置。props 由父组件传递给子组件，并且就子组件而言，props 是不可变的(immutable)。组件不能改变自身的 props，但是可以把其子组件的 props 放在一起(统一管理)。Props 也不仅仅是数据–回调函数也可以通过 props 传递。

箭头函数

函数箭头（=>）是用于编写函数表达式的简洁语法，这些函数允许正确的绑定组件上下文。
箭头函数完全修复了this的指向，this总是指向词法作用域，也就是外层调用者

React路由 React-router

React 路由是一个构建在 React 之上的强大的路由库，实现让根组件根据用户访问的地址动态挂载不同的组件。

(1) exact 属性

exact 关键词，表示只对当前的路由进行匹配。

(2)Switch组件

采用 <Switch>，只有一个路由会被渲染，并且总是渲染第一个匹配到的组件。

React Redux

redux 是一个状态管理器，能够使React组件从Redux store中读取数据，并且向store分发actions以更新数据。

// 定义计算规则，即 reducer
function counter(state = 0, action) {
    switch (action.type) {
        case 'INCREMENT':
            return state + 1
        case 'DECREMENT':
            return state - 1
        default:
            return state
    }
}

// 根据计算规则生成 store
let store = createStore(counter)

// 定义数据（即 state）变化之后的派发规则
store.subscribe(() => {
    console.log('current state', store.getState())
})

// 触发数据变化
store.dispatch({type: 'INCREMENT'})
store.dispatch({type: 'INCREMENT'})
store.dispatch({type: 'DECREMENT'})