目录正文缓存值缓存函数组件为什么会重新渲染缓存复杂的计算什么是复杂的计算何时进行优化呢总结正文 现实很多项目存在大量的useMemo和useCallback,大多数的使用并没有起到实
现实很多项目存在大量的useMemo和useCallback,大多数的使用并没有起到实际作用,使得项目的渲染效率更低了。
我们在应用程序中使用useMemo和useCallback这两个Hook,主要是因为想要缓存结果:
所以我们经常这样使用这两个Hook:
useMemo 缓存value,防止重新渲染。以下是伪代码:
const AppItem = ({item, data}) => <button>{item.val + newDate}</button>
const App = ({data}) => {
const newDate = useMemo(() => data.value, [data.value])
return (
<>
{
list.map(item => {
return <AppItem key={item.id} item={item} data={newDate} />
})
}
</>
)
}
useCallback缓存click 事件,防止重复渲染。以下是伪代码:
const AppItem = ({item, data, onClick}) => <button onClick={onClick}>{item.val + newDate}</button>
const App = ({data}) => {
const newDate = useMemo(() => data.value, [data.value])
const onClick = useCallback(() => {
// ...
}, [])
return (
<>
{
list.map(item => {
return <AppItem key={item.id} item={item} data={newDate} onClick={onClick} />
})
}
</>
)
}
上述是我们经常见到的场景。但是这样使用就一定是正确的吗?答案是否定的。之前写过一篇React为什么会重新渲染的文章。这里在解释下。
重新渲染其中一个原因就是:state 或者 props 发生变化时。所以我们很天真的认为只要state或者props不变,组件就不会重新渲染了。
组件的重新渲染还有一个原因,我们知道但是经常在我们写代码的时候会忽略的原因:就是他的父组件重新渲染了。父组件渲染了,我们只在子组件内部缓存值或者函数是没有作用的。
看一个例子:
const App = () => {
const [count, setCount] = useState(0)
return (
<>
<button onClick={() => setCount(count+1)}>点我</button>
<OtherComp />
</>
)
}
我们可以看到:点击按钮,App组件重新渲染,他的子组件OtherComp虽然没有任何的state或者props变化,但是他也重新渲染了。如果这个子组件也有子组件,以此类推,就会形成一条渲染链。
但是我们不是经常这样写吗:在这个组件中使用缓存手段。
const App = ({val}) => {
const [count, setCount] = useState(0)
const onClick = useCallback(() => {
// ...
}, [])
const data = useMemo(() => val, [val])
return (
<>
<button onClick={() => setCount(count+1)}>点我</button>
<OtherComp onClick={onClick} data={data} />
</>
)
}
这样并不会阻止子组件的重新渲染。怎样解决呢?当然是还要缓存子组件了。
const OtherCompMemo = React.memo(OtherComp)
const App = ({val}) => {
const [count, setCount] = useState(0)
const onClick = useCallback(() => {
// ...
}, [])
const data = useMemo(() => val, [val])
return (
<>
<button onClick={() => setCount(count+1)}>点我</button>
<OtherCompMemo onClick={onClick} data={data} />
</>
)
}
现在React会识别props没有变化,onClick 和 data也被缓存了,所以需要配合使用。
根据React文档:useMemo是用来缓存复杂计算的。假设有一个100000项的数组需要排序操作,此时我们应该缓存复杂的计算:
const dataList = ({data}) => {
const contentnode = useMemo(() => {
return data.map(item => {
return <div key={item}>{item}</div>
})
}, [data, sort]);
return contentNode;
}
以上就是useCallback和useMemo的正确用法详解的详细内容,更多关于useCallback和useMemo用法的资料请关注编程网其它相关文章!
--结束END--
本文标题: useCallback和useMemo的正确用法详解
本文链接: https://www.lsjlt.com/news/177785.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0