1. 前言
- useMemo 和 useCallback ,React.memo是react中 性能优化用的最多的,乱用的也是最多的
- 简单写下自己的拙见吧 记录下,方便以后进步了打脸哈哈
2. 是什么 what
- useMemo、useCallback 和 React.memo 都是 React 中
性能优化的工具，它们可以用来避免不必要的重新计算和渲染，提高组件的性能。
3. useMemo
- useMemo 是一个用于
性能优化的 Hook，它接受一个计算函数和一个依赖数组作为参数。- 计算函数会在依赖项发生
变化时执行，并返回计算结果。- useMemo 会在组件渲染过程中进行
记忆，并在依赖项未发生变化时，直接返回上一次的计算结果，避免重复计算。- 这对于一些计算量较大的操作或者昂贵的函数调用非常有用
import React, { useMemo } from 'react'; function MyComponent({ a, b }) { const result = useMemo(() => { // 计算逻辑 return a + b; }, [a, b]); return <div>{result}</div>; } export default MyComponent;
- useMemo 会根据依赖项 a 和 b 的变化来决定是否重新计算 result。
- 当 a 或 b 发生变化时，useMemo 会执行计算函数并返回新的结果
- 否则它会直接返回上一次的计算结果
- vue3 也有个 v-memo指令哦
4. useCallback
- useCallback 也是一个用于
性能优化的 Hook，它用于返回一个记忆化的回调函数。- 它接受一个回调函数和一个依赖数组作为参数，并在依赖项未发生变化时，返回上一次的回调函数。
- 这样可以避免在每次渲染时创建新的回调函数，减少不必要的函数创建和传递
import React, { useCallback } from 'react'; function MyComponent({ onClick }) { const handleClick = useCallback(() => { // 处理点击事件 onClick(); }, [onClick]); return <button onClick={handleClick}>Click</button>; } export default MyComponent;
- useCallback 会根据依赖项 onClick 的变化来决定是否返回新的回调函数。
- 当 onClick 发生变化时，useCallback 返回一个新的回调函数，否则它会直接返回上一次的回调函数。
5. React.memo
- React.memo 是一个
高阶组件，用于对函数组件进行记忆化处理。- 它接受一个组件作为参数，并返回一个经过记忆化处理的新组件。
- 记忆化组件会在其 props 发生变化时进行浅比较，如果 props 没有发生变化，就会直接使用上一次的渲染结果，避免不必要的重新渲染。
import React from 'react'; const MyComponent = React.memo(({ value }) => { // 组件渲染逻辑 return <div>{value}</div>; }); export default MyComponent;
React.memo 会根据组件的 props 进行
浅比较，如果 props 没有发生变化，就会直接使用上一次的渲染结果，避免重新渲染。
6. 综合对比demo
import React, { useState, useMemo, useCallback } from 'react'; function ParentComponent() { const [count, setCount] = useState(0); const doubleCount = useMemo(() => { console.log('Calculating double count...'); return count * 2; }, [count]); const handleClick = useCallback(() => { console.log('Button clicked'); setCount(count + 1); }, [count]); return ( <div> <ChildComponent value={doubleCount} onClick={handleClick} /> </div> ); } const ChildComponent = React.memo(({ value, onClick }) => { console.log('Rendering child component...'); return ( <div> <p>Value: {value}</p> <button onClick={onClick}>Click</button> </div> ); }); export default ParentComponent;
ParentComponent组件使用了useMemo缓存了 doubleCount 的计算结果- 并使用
useCallback缓存了 handleClick 的回调函数。ChildComponent组件使用了React.memo进行了记忆化处理，当 ParentComponent 的 count 发生变化时，只有 doubleCount 发生变化时，ChildComponent 才会重新渲染。这样可以有效避免不必要的计算和渲染
7. 列表对比
import React, { useState, useMemo, useCallback } from 'react'; // 假设有一个大型数据源 const dataSource = [ { id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }, { id: 3, name: 'Item 3' }, // ...更多项 ]; function ListComponent() { const [selectedItem, setSelectedItem] = useState(null); const handleItemClick = useCallback((item) => { setSelectedItem(item); }, []); const renderedItems = useMemo(() => { console.log('Calculating rendered items...'); return dataSource.map((item) => ( <Item key={item.id} item={item} onClick={handleItemClick} isSelected={selectedItem === item} /> )); }, [handleItemClick, selectedItem]); return <div>{renderedItems}</div>; } const Item = React.memo(({ item, onClick, isSelected }) => { console.log('Rendering item...'); return ( <div onClick={() => onClick(item)} style={{ background: isSelected ? 'yellow' : 'white' }} > {item.name} </div> ); }); export default ListComponent;
8. 咋知道组件是否需要缓存呢
成本
- 工作量的增加： 一旦使用缓存，就必须保证组件本身以及所有 props 都缓存，后续添加的所有 props 都要缓存。
- 代码复杂度和可读性的变化：代码中出现大量缓存函数，这会增加代码复杂度，并降低易读性
- 性能成本: 组件的缓存是在初始化时进行，虽然每个组件缓存的性能耗费很低，通常不足1ms，但大型程序里成百上千的组件如果同时初始化缓存，成本可能会变得很可观
- 所以局部使用 memo，比全局使用显的更优雅、性能更好，坏处是需要开发者主动去判断是否需要缓存该子组件。
这里也有建议官方直接加上默认缓存组件的,论坛里各种谈论都有
判断依据
- 人肉判断，开发或者测试人员在研发过程中感知到渲染性能问题，并进行判断。
- 通过工具协助开发者在查看组件性能
9. 总结
1.使用 React.memo：使用 React.memo 对组件进行记忆化处理，避免不必要的重新
渲染。
- 使用 useMemo：使用 useMemo 缓存
计算昂贵的值，避免重复计算。- 使用 useCallback：使用 useCallback 缓存
回调函数，避免在每次渲染时创建新的回调函数。
