ToB企服应用市场:ToB评测及商务社交产业平台
标题:
React Hook 总结(React 萌新升级打怪中...)
[打印本页]
作者:
河曲智叟
时间:
2024-7-24 08:27
标题:
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 版本 )
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)
Powered by Discuz! X3.4