巩固React

Emilia Zhen大约 5 分钟

`react`中`key`的作用，有`key`没`key`有什么区别，比较同一层级节点什么意思？

Keys是React用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识

你对虚拟`dom`和`diff`算法的理解，实现`render`函数

虚拟DOM本质上是JavaScript对象,是对真实DOM的抽象表现。
状态变更时，记录新树和旧树的差异
最后把差异更新到真正的dom中
render函数:
根据tagName生成父标签,读取props，设置属性，如果有content，设置innerHtml或innerText,
如果存在子元素，遍历子元素递归调用render方法，将生成的子元素依次添加到父元素中，并返回根元素。

`React`组件之间通信方式

父子组件,父 -> 子直接用Props,子 -> 父用callback回调
非父子组件,用发布订阅模式的Event模块
项目复杂的话用Redux、Mobx等全局状态管理管库
Context Api context 会使组件复用性变差 Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法.如果你只是想避免层层传递一些属性，组件组合（component composition）有时候是一个比 context 更好的解决方案。
组件组合缺点：会使高层组件变得复杂

生命周期都有哪几种，分别是在什么阶段做哪些事情？为什么要废弃一些生命周期？

componentWillMount、componentWillReceiveProps、componentWillUpdate在 16 版本被废弃，在 17 版本将被删除，需要使用UNSAVE_前缀使用，目的是向下兼容。

`react`的优化方法

代码层面：使用return null而不是CSS的display:none来控制节点的显示隐藏。保证同一时间页面的DOM节点尽可能的少。
props和state的数据尽可能简单明了，扁平化。不要使用数组下标作为key
利用 shouldComponentUpdate 和 PureComponent 避免过多 render function;
render里面尽量减少新建变量和bind函数，传递参数是尽量减少传递参数的数量。
尽量将 props 和 state 扁平化，只传递 component 需要的 props（传得太多，或者层次传得太深，都会加重shouldComponentUpdate里面的数据比较负担），慎将 component 当作 props 传入
代码体积：使用 babel-plugin-import 优化业务组件的引入，实现按需加载
使用 SplitChunksPlugin 拆分公共代码
使用动态 import，懒加载 React 组件

`setState`是同步还是异步的

setState只在合成事件和钩子函数中是“异步”的，在原生事件和 setTimeout 中都是同步的。
setState的“异步”并不是说内部由异步代码实现，其实本身执行的过程和代码都是同步的，只是合成事件和钩子函数的调用顺序在更新之前，导致在合成事件和钩子函数中没法立马拿到更新后的值，形式了所谓的“异步”，当然可以通过第二个参数 setState(partialState, callback) 中的callback拿到更新后的结果。
setState 的批量更新优化也是建立在“异步”（合成事件、钩子函数）之上的，在原生事件和setTimeout 中不会批量更新，在“异步”中如果对同一个值进行多次 setState ， setState 的批量更新策略会对其进行覆盖，取最后一次的执行，如果是同时 setState 多个不同的值，在更新时会对其进行合并批量更新。

Provider：从最外部封装了整个应用，并向connect模块传递store。
Connect：
- 包装原组件，将state和action通过props的方式传入到原组件内部。
- 监听store tree变化，使其包装的原组件可以响应state变化

对高阶组件的理解

高阶组件是参数为组件，返回值为新组件的函数。HOC是纯函数，没有副作用。HOC在React的第三方库中很常见，例如Redux的connect组件。

高阶组件的作用：

代码复用，逻辑抽象，抽离底层准备（bootstrap）代码
渲染劫持
State 抽象和更改
Props 更改

可以用哪些方式创建`React`组件？

React.createClass()
ES6 class
无状态函数

react主张函数式编程，所以推崇纯组件，数据不可变，单向数据流，
vue的思想是响应式的，也就是基于是数据可变的，通过对每一个属性建立Watcher来监听，当属性变化的时候，响应式的更新对应的虚拟dom。

监听数据变化实现原理：

Vue 通过 getter/setter 以及一些函数的劫持，能精确知道数据变化，不需要特别的优化就能达到很好的性能
React 默认是通过比较引用的方式进行的，如果不优化(PureComponent/shouldComponentUpdate)可能导致大量不必要的VDOM的重新渲染。

组件通信的区别：jsx 和.vue 模板。

HoC和Mixins(在 Vue 中我们组合不同功能的方式是通过Mixin，而在React中我们通过HoC(高阶组件))。

性能优化

React: shouldComponentUpdate
Vue:内部实现shouldComponentUpdate的优化，由于依赖追踪系统存在，通过watcher判断是否需要重新渲染(当一个页面数据量较大时，Vue的性能较差，造成页面卡顿，所以一般数据比较大的项目倾向使用 React)。

vuex 和 redux 之间的区别？

从实现原理上来说，最大的区别是两点：

Redux使用的是不可变数据，而Vuex的数据是可变的。Redux每次都是用新的state替换旧的state，而Vuex是直接修改
Redux在检测数据变化的时候，是通过diff的方式比较差异的，而Vuex其实和Vue的原理一样，是通过 getter/setter来比较的(如果看Vuex源码会知道，其实他内部直接创建一个Vue实例用来跟踪数据变化)