写点什么

无脑用 react 的 useCallback

用户头像
sadhu
关注
发布于: 2021 年 04 月 14 日

useCallback 在 react 官方文档中示例不多,这里贴出一个常见的使用场景,不需要费力的记住那些东西,而只要按着模式重复套用即可。

import {useCallback} from 'react'
import {BigList} from './big-list'
export function BigListWrapper() { console.log(`render BigListWrapper`) const fn = useCallback(e => { console.log(e.target.textContent) }, [])
return ( <BigList fn={fn} /> )}
复制代码

假设有一个长列表的容器组件。使用 useCallback 生成 memoized 版本的点击处理回调,第一个参数是处理点击事件的函数,第二个参数是依赖项数组,第一个参数——函数里用到的任何值,都应该罗列在依赖项数组中(没有依赖,即代码中的空数组 [])。不论容器组件渲染多少次,该 memoized 版本的点击回调永远只有一个版本,即每次渲染后的回调都和上次的一模一样。


export function BigList({fn}) {  console.log(`render BigList`)    const source = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]    const items = source.map(item => (    <p onClick={fn} key={item}>{item}</p>  ))    return (    <div>      {items}    </div>  )}
复制代码

这个就是容器里的长列表,每个列表项上有一个点击处理回调。该回调在父组件——那个长列表的容器组件,通过 props 传递到子组件——这个长列表组件。

useCallback 还有其他的一些使用场景,比如这个https://reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback。全部的示例代码在这里https://github.com/a-sad-lab/rp-3

发布于: 2021 年 04 月 14 日阅读数: 9
用户头像

sadhu

关注

一个废废的老年悲观者 2013.05.14 加入

在下老菜鸟,https://github.com/sad-hu

评论

发布
暂无评论
无脑用 react 的 useCallback