无脑用 react 的 useCallback

关注

发布于: 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 日阅读数: 14

原文链接:【http://xie.infoq.cn/article/4f2e3b00ed33057f2d5763df7】。

sadhu

关注

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

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

发布

暂无评论

创作场景

无脑用 react 的 useCallback

sadhu

评论