React Hooks之memo useMemo useCallback

一 memo useMemo与useCallback关系:

useCallback和useMemo的参数跟useEffect一致，他们之间最大的区别有是useEffect可用于处理副作用，而前两个hooks不能。useMemo和useCallback都会在组件第一次渲染的时候执行，之后会在其依赖的变量发生改变时再次执行；并且这两个hooks都返回缓存的值，useMemo返回缓存的变量，useCallback返回缓存的函数。

1 useMemo缓存的是一个值，

2 useCallback缓存的是一个函数，是对一个单独的props值进行缓存，

3 memo缓存的是组件本身，是站在全局的角度进行优化.

memo 仅检查 props 变更。如果函数组件被 React.memo 包裹，且其实现中拥有useState，useReducer 或 useContext 的 Hook，当 context 发生变化时，它仍会重新渲染。

memo 接受第二个参数 compare，compare 返回值为 true 不渲染，false 则渲染

 1 import React, { useState, memo, useMemo, useCallback } from 'react'
 2 
 3 const Child = (props) => {
 4   console.log('子组件 Child');
 5   return (
 6     <div>子组件 Child</div>
 7   );
 8 };
 9 
10 /* 比较 prevProps 与 nextProps */
11 // 如果为 true 表示该组件不需要重新渲染，如果为 false 表示重新渲染该组件
12 const compare = (prevProps, nextProps) => {
13   console.log(prevProps, nextProps);
14   if (prevProps.count === nextProps.count) {
15     return false
16   } else {
17     return true
18   }
19 }
20 const ChildMemo = memo((props) => {
21   console.log('子组件 ChildMemo');
22   return (
23     <div>子组件 ChildMemo</div>
24   );
25 }, compare);
26 
27 const App = () => {
28   const [count, setCount] = React.useState(0);
29   return (
30     <div>
31       <div> count:{count}</div>
32       <button
33         onClick={() => {
34           setCount(count + 1);
35         }}>
36         按钮新增
37       </button>
38 
39       <Child count={count} />
40 
41       <ChildMemo count={count} />
42     </div>
43   );
44 };
45 
46 export default App

View Code