React 性能優(yōu)化
React 中的性能優(yōu)化丈莺，一般都是immer+純組件(React.PureComponent)/memo(shouldComponentUpdate())划煮。
- 函數(shù)組件里面用 React.memo()
- 類組件里面用 React.PureComponent 或 shouldComponentUpdate()。
如果正常我們什么都不使用缔俄，父組件更新弛秋，子組件肯定會更新器躏。
但是父組件只需要 render 它需要更新的地方就行了，有些子組件不需要更新蟹略。為了達到這個目的登失，我們就需要 shouldComponentUpdate 了。
它做了一次淺比較挖炬，引用類型不變是不會 render 的揽浙。所以要用 useMemo useCallback immer 這種。
React.PureComponent
shouldComponentUpdate(nextProps, nextState) {
return true;
}
React.PureComponent意敛，用當前與之前 props 和 state 的淺比較覆寫了 shouldComponentUpdate() 的實現(xiàn)馅巷。
React.memo
React.memo 僅檢查 props 變更，也是淺比較草姻，如果函數(shù)組件被 React.memo 包裹钓猬，且其實現(xiàn)中擁有 useState，useReducer 或 useContext 的 Hook碴倾，當 state 或 context 發(fā)生變化時逗噩，它仍會重新渲染。跌榔？
const MyComponent = React.memo(function MyComponent(props) {
/* 使用 props 渲染 */
});
如果需要進行深比較自己判斷邏輯异雁，可以在 React.memo()方法中傳入傳入第二個參數(shù)
unction MyComponent(props) {
/* 使用 props 渲染 */
}
function areEqual(prevProps, nextProps) {
/*
如果把 nextProps 傳入 render 方法的返回結(jié)果與
將 prevProps 傳入 render 方法的返回結(jié)果一致則返回 true，
否則返回 false
*/
}
export default React.memo(MyComponent, areEqual);
大家詬病 react 的地方是指：父組件更新僧须，只需要 render 他需要更新的地方就行了纲刀，有些子組件不需要更新，都是需要我們使用者來處理這些性能優(yōu)化邏輯担平，React 內(nèi)部沒幫忙處理這些示绊。為什么 React 內(nèi)部不直接自己處理這些邏輯呢？
1.scu 是淺比較暂论，這種對很多人就不適用 2.有些簡單場景不用這個 3.為什么是淺比較面褐，因為時間片較為固定，所以希望這個比較的時間相對固定取胎，這個是深比較做不到的
問題
- React.memo 和 useMemo 的區(qū)別是什么
React.memo 是高階組件（hoc）展哭，用來包裝不想重復(fù)渲染的組件，除非 props 發(fā)生變化
useMemo 是一個 React Hook闻蛀，在組件中包裝函數(shù)匪傍，確保函數(shù)的值只有在其依賴項其一發(fā)生變化時才重新計算。
memoization 雖然表面上看是隨處可用的觉痛，但是最好在絕對需要使用時才使用役衡，它會占用機器上的內(nèi)存空間。
useMemo 返回的是 JSX.Element薪棒，而 memo 返回的是 JSXConstructor手蝎。
React.memo() 和 useMemo() 的用法和區(qū)別
React context 的性能優(yōu)化
context 解決了多個層級之間傳遞 props 的問題榕莺。但是只要 context 的 value 發(fā)生變化，所有消費該 context 組件都是重新渲染柑船。
比如帽撑，context 的 value 為
{
count1: 'a',
count2: 'b',
}
子組件 A 消費 count1，子組件 B 消費 count2鞍时，count1 發(fā)生變化時，子組件 A 和子組件 B 都會發(fā)生重新渲染扣蜻，但是這個時候其實子組件 B 是不需要重新渲染的逆巍。
如何解決這個問題呢
React Context 性能優(yōu)化
- 拆分 context，更細顆粒度的拆分
- 使用 useMemo 和 React.memo
vuex 和 redux 的區(qū)別：
實現(xiàn)原理：
Redux 使用的是不可變數(shù)據(jù)類型莽使，Redux 每次都是使用新的 state 替換舊的 state锐极。
Vuex 使用的是可變數(shù)據(jù)類型，Vuex 是直接修改芳肌。
