您的位置:首页 > 游戏 > 手游 > React Hook 总结(React 萌新升级打怪中...)

React Hook 总结(React 萌新升级打怪中...)

2024/10/14 9:15:00 来源:https://blog.csdn.net/Xxxxxl17/article/details/140530357  浏览:    关键词:React Hook 总结(React 萌新升级打怪中...)

1 useCallback

useMemo 和 useCallback 接收的参数都是一样,都是在其依赖项发生变化后才执行,都是返回缓存的值,区别在于 useMemo 返回的是函数运行的结果,useCallback 返回的是函数。

当需要使用 useCallback 的情况通常包括以下几种情形:

(1)将回调函数作为 prop 传递给子组件:在这种情况下,使用 useCallback 可以确保子组件在父组件重新渲染时不会不必要地重新渲染。

import React, { useCallback } from 'react';const ParentComponent = () => {const handleClick = useCallback(() => {console.log('Button clicked!');}, []);return <ChildComponent onClick={handleClick} />;
};const ChildComponent = ({ onClick }) => {return <button onClick={onClick}>Click me</button>;
};

(2)优化依赖项变化引起的重新渲染:在 useEffect 中使用 useCallback 可以避免不必要的重新执行。

import React, { useState, useEffect, useCallback } from 'react';const ExampleComponent = () => {const [count, setCount] = useState(0);const handleIncrement = useCallback(() => {setCount(count + 1);}, [count]);useEffect(() => {console.log('Count changed:', count);}, [handleIncrement]);return (<div><p>Count: {count}</p><button onClick={handleIncrement}>Increment</button></div>);
};

(3)避免不必要的函数创建:在需要动态生成函数的场景下,使用 useCallback 缓存函数。

import React, { useCallback } from 'react';const ExampleComponent = () => {const generateRandomNumber = useCallback(() => {return Math.floor(Math.random() * 100);}, []);return (<div><p>Random number: {generateRandomNumber()}</p></div>);
};

注意: useCallBack不要每个函数都包一下,否则就会变成反向优化,useCallBack本身就是需要一定性能的
useCallBack并不能阻止函数重新创建,它只能通过依赖决定返回新的函数还是旧的函数,从而在依赖不变的情况下保证函数地址不变。useCallBack你真的知道怎么用吗。

2 useMemo

useMemo 可以在函数组件 render 上下文中同步执行一个函数逻辑,这个函数的返回值可以作为一个新的状态缓存起来。

场景一:在一些场景下,需要在函数组件中进行大量的逻辑计算,那么我们不期望每一次函数组件渲染都执行这些复杂的计算逻辑,所以就需要在 useMemo 的回调函数中执行这些逻辑,然后把得到的产物(计算结果)缓存起来就可以了。
场景二:React 在整个更新流程中,diff 起到了决定性的作用,比如 Context 中的 provider 通过 diff value 来判断是否更新

缓存计算结果:

function Scope(){const style = useMemo(()=>{let computedStyle = {}// 经过大量的计算return computedStyle},[])return <div style={style} ></div>
}

缓存组件,减少子组件 render 次数:

function Scope ({ children }){const renderChild = useMemo(()=>{ children()  },[ children ])return <div>{ renderChild } </div>
}

参考

「React 进阶」 React 全部 Hooks 使用大全 (包含 React v18 版本 )

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com