React.memo、useMemo、useCallback 的区别
-
React.memo是对传入的props进行前比较，只有props中的值变化了，才会更新被包裹的子组件，当然，它还可以接收第二个参数，用于自定义比较的过程。// 自定义比较过程：prevProps上一次的props，nextProps本次的props const isEqual = (prevProps, nextProps) => { if (prevProps.number !== nextProps.number) { return false; } return true; } export default React.memo((props = {}) => { return (<p>number is : {props.number}</p>); }, isEqual) - 从细粒度上来说，
React.memo是组件级别的；而useMemo的细粒度更小，它缓存的是值，只有当第二个参数数组的元素发生变化时，才会重新计算函数，返回一个新的值，当然，这个值也可能是一个新的组件；export default (props = {}) => { return useMemo(() => { return (<p>number is : {props.number}</p>) // 监听 props 中的某个属性，只有这个属性发生变化时，才重新执行函数，缓存一个新的值 }, [props.number]) } -
useMemo缓存的是一个函数，它常常与React.memo配合使用。这是因为，当父组件重新渲染时，绑定在子组件上的函数会重新创建，这就意味着子组件的props发生了变化，React.memo也跟着渲染包裹的子组件。// App.jsx export default function App() { const [count, setCount] = useState(0); const handleClickButton = useCallback(() => { setCount(count + 1); }, [count]); return (<Button onClickButton={handleClickButton}>Button</Button>); } // Button.jsx const Button = ({ onClickButton, children }) => { return ( <> <button onClick={onClickButton}>{children}</button> </> ); }; export default React.memo(Button)
