react组件memo useMemo useCallback使用区别示例
目录
- 正文
- memo使用
- useMemo使用
- useCallback使用
正文
memo用来优化函数组件的重复渲染行为,针对的是一个组件
useMemo返回一个memoized的值
本质都是用同样的算法来判定依赖是否发生改变,继而决定是否触发memo或者useMemo中的逻辑,利用memo就可以避免不必要的重复计算,减少资源浪费
useCallback返回一个memoized的函数
useMemo和useCallback都接收两个参数,第一个参数为fn,第二个参数为[],数组中是变化依赖的参数 memo则可以直接作用于组件,例如
export default memo(Mycomponent)
useMemo和useEffect的执行时机是不一致的:useEffect执行的是副作用,所以一定是在渲染之后执行的,useMemo是需要有返回值的,而返回值可以直接参与渲染的,所以useMemo是在渲染期间完成的
memo使用
// 父组件 const Parent = ()=>{ const [count, setCount] = useState(1) const addCount = ()=>{ setCount(count + 1) } return( <> <div onClick={addCount}>计数: {count}</div> <Child /> </> ) } // 子组件 const Child = memo(()=>{ console.log('child start---') return( <div>child...</div> ) }) // 使用memo后,子组件的props或者state没有变化时,将不会对子组件进行渲染
useMemo使用
const sum = ()=>{ return a+b } const result = useMemo(()=>{sum()},[a,b]) // 只有在a或者b的值变化时才会触发sum函数执行
useCallback使用
// 父组件,给子组件传递name和changeName方法 const Parent = () => { const [count, setCount] = useState(1); const [name, setName] = useState("bbz"); const addCount = () => { setCount(count + 1); }; const changeName = useCallback((n) => { setName(n); }, []); return ( <> <div onClick={addCount}>计数: {count}</div> <Child name={name} changeName={changeName} /> </> ); }; // 子组件 const Child = ({ name, changeName }) => { console.log("child start---"); return ( <div onClick={() => { changeName("bobozai"); }} > child comps: {name} </div> ); }; // 如果不使用useCallback,则点击父组件计数的同时,子组件会console进行渲染, // 因为更新count时父组件会重新渲染,导致重新生成了一个changeName函数, // 所以子组件的props变了,导致子组件会重新渲染 // 而对changeName函数用useCallback进行包裹,则对函数进行缓存不会重新生成
以上就是react组件memo useMemo useCallback使用区别的详细内容,更多关于react组件memo useMemo useCallback的资料请关注我们其它相关文章!
赞 (0)