React 性能优化
React 中的性能优化，一般都是immer+纯组件(React.PureComponent)/memo(shouldComponentUpdate())。
- 函数组件里面用 React.memo()
- 类组件里面用 React.PureComponent 或 shouldComponentUpdate()。
如果正常我们什么都不使用，父组件更新，子组件肯定会更新。
但是父组件只需要 render 它需要更新的地方就行了，有些子组件不需要更新。为了达到这个目的，我们就需要 shouldComponentUpdate 了。
它做了一次浅比较，引用类型不变是不会 render 的。所以要用 useMemo useCallback immer 这种。
React.PureComponent
shouldComponentUpdate(nextProps, nextState) {
return true;
}
React.PureComponent，用当前与之前 props 和 state 的浅比较覆写了 shouldComponentUpdate() 的实现。
React.memo
React.memo 仅检查 props 变更，也是浅比较，如果函数组件被 React.memo 包裹，且其实现中拥有 useState，useReducer 或 useContext 的 Hook，当 state 或 context 发生变化时，它仍会重新渲染。？
const MyComponent = React.memo(function MyComponent(props) {
/* 使用 props 渲染 */
});
如果需要进行深比较自己判断逻辑，可以在 React.memo()方法中传入传入第二个参数
unction MyComponent(props) {
/* 使用 props 渲染 */
}
function areEqual(prevProps, nextProps) {
/*
如果把 nextProps 传入 render 方法的返回结果与
将 prevProps 传入 render 方法的返回结果一致则返回 true，
否则返回 false
*/
}
export default React.memo(MyComponent, areEqual);
大家诟病 react 的地方是指：父组件更新，只需要 render 他需要更新的地方就行了，有些子组件不需要更新，都是需要我们使用者来处理这些性能优化逻辑，React 内部没帮忙处理这些。为什么 React 内部不直接自己处理这些逻辑呢？
1.scu 是浅比较，这种对很多人就不适用 2.有些简单场景不用这个 3.为什么是浅比较，因为时间片较为固定，所以希望这个比较的时间相对固定，这个是深比较做不到的
问题
- React.memo 和 useMemo 的区别是什么
React.memo 是高阶组件（hoc），用来包装不想重复渲染的组件，除非 props 发生变化
useMemo 是一个 React Hook，在组件中包装函数，确保函数的值只有在其依赖项其一发生变化时才重新计算。
memoization 虽然表面上看是随处可用的，但是最好在绝对需要使用时才使用，它会占用机器上的内存空间。
useMemo 返回的是 JSX.Element，而 memo 返回的是 JSXConstructor。
React.memo() 和 useMemo() 的用法和区别
React context 的性能优化
context 解决了多个层级之间传递 props 的问题。但是只要 context 的 value 发生变化，所有消费该 context 组件都是重新渲染。
比如，context 的 value 为
{
count1: 'a',
count2: 'b',
}
子组件 A 消费 count1，子组件 B 消费 count2，count1 发生变化时，子组件 A 和子组件 B 都会发生重新渲染，但是这个时候其实子组件 B 是不需要重新渲染的。
如何解决这个问题呢
React Context 性能优化
- 拆分 context，更细颗粒度的拆分
- 使用 useMemo 和 React.memo
vuex 和 redux 的区别：
实现原理：
Redux 使用的是不可变数据类型，Redux 每次都是使用新的 state 替换旧的 state。
Vuex 使用的是可变数据类型，Vuex 是直接修改。
