本文共 2629 字，大约阅读时间需要 8 分钟。

react 部分

为什么不能用数组下标来作为react组件中的key？

react 使用diff算法，使用key来做同级比对。如果使用数组下标作为key，有以下情况：

在数组头部或中部插入或删除元素：所有key对应的节点的值发生更改，进行重新渲染。造成性能损耗

而如果使用数组中唯一值来作为key：不管是在何处插入或删除节点，其他key对应的节点的值未发生更改，只需插入或删除操作的数组节点。

react shouldComponentUpdate 函数的作用？

使用shouldComponentUpdate()以让React知道当前状态或属性的改变是否不影响组件的输出，默认返回ture，返回false时不会重写render，而且该方法并不会在初始化渲染或当使用forceUpdate()时被调用.

如果在组件树的根节点发生更新则所有子节点都会发生更新，这时对所有子节点使用shouldComponentUpdate来减少子节点的渲染，无疑会增加很多代码。我们可以选择使用PureComponent来处理。

React.PureComponent 和 React.Component

PureComponent 和 Component的区别是：Component需要手动实现 shouldComponentUpdate，而PureComponent通过浅对比默认实现了shouldComponentUpdate方法

浅比较 (shallowEqual)，即react源码中的一个函数，然后根据下面的方法进行是不是 PureComponent 的判断，帮我们做了本来应该我们在 shouldComponentUpdate 中做的事情

if (this._compositeType === CompositeTypes.PureClass) {  shouldUpdate = !shallowEqual(prevProps, nextProps) || ! shallowEqual(inst.state, nextState);}

注意：浅比较对引用类型（数组/对象）只比较引用的地址，不会比较引用的实际指向的对象属性。

React.memo

React.memo为高阶组件。它与 React.PureComponent 非常相似，但它适用于函数组件，但不适用于 class 组件。

如果你的函数组件在给定相同 props 的情况下渲染相同的结果，那么你可以通过将其包装在 React.memo 中调用，以此通过记忆组件渲染结果的方式来提高组件的性能表现。这意味着在这种情况下， React 将跳过渲染组件的操作并直接复用最近一次渲染的结果。

React.memo 依然是一种对象的浅比较(默认)，有复杂对象时无法 render 。在 React.memo 中 可以自定义其比较方法的实现。

function MyComponent(props) {  /* render using props */}function areEqual(prevProps, nextProps) {  /*  return true if passing nextProps to render would return  the same result as passing prevProps to render,  otherwise return false  */}export default React.memo(MyComponent, areEqual);

和PureComponent的区别：

• memo为函数组件，PureComponent为类组件
• memo 默认和PureComponent为浅比较
• memo 如果相同props的情况下将跳过渲染直接服用最近一次渲染的效果

总结

PureComponent不仅会影响本身，而且会影响子组件，所以PureComponent最佳情况是展示组件

react 高阶组件？

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

高阶组件的作用：

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

高阶组件的实现：

• 属性代理
• 反向继承

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 拆分公共代码
• 分析 CSS 和 JS 代码覆盖率
• 优化 Webpack 中的库
• 使用  ， 
• 使用  
• 使用  ， 
• 使用    &    &  

性能检测工具:

• React.addons.Perf
• Chrome Performance
• React DevTools

react hooks?

Redux

redux 原理？

vuex 和 redux 之间的区别？

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

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

转载地址：http://bxqni.baihongyu.com/