hooks 系列五:useCallback
source link: https://segmentfault.com/a/1190000040416622
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
快来加入我们吧!
"小和山的菜鸟们",为前端开发者提供技术相关资讯以及系列基础文章。为更好的用户体验,请您移至我们官网小和山的菜鸟们 ( https://xhs-rookies.com/ ) 进行学习,及时获取最新文章。
"Code tailor" ,如果您对我们文章感兴趣、或是想提一些建议,微信关注 “小和山的菜鸟们” 公众号,与我们取的联系,您也可以在微信上观看我们的文章。每一个建议或是赞同都是对我们极大的鼓励!
这篇文章,我们主要目的是了解一下 (useCallback) 的使用.
useCallback
useCallback
返回一个 memoized 回调函数。
const memoizedCallback = useCallback(fn, deps)
useCallback 所需参数
fn
:一个函数最终会返回该回调函数,该回调函数仅仅只在deps
参数发生改变时才会更新。deps
: 用于触发fn
回调函数改变的参数列表。
注意:
deps
是一个数组,也就是说改变fn
的参数可以有很多。
把内联回调函数及依赖项数组作为参数传入 useCallback
,它将返回该回调函数的 memoized 版本,该回调函数仅在某个依赖项改变时才会更新。当你把回调函数传递给经过优化的并使用引用相等性去避免非必要渲染(例如 shouldComponentUpdate
)的子组件时,它将非常有用。
我们先来看一个简单的例子。
这个是一个子组件,接受父类的一个 fn
方法并展示其按钮。
const ChildComponent = memo(function (props) { console.log('child render!') return <Button onClick={props.fn}> showTime</Button> })
注意: 这里的
memo
也是一个Hooks
, 详情请见Hook API 索引 – React (reactjs.org)
这是一个父组件,里面有一个计数器,一个数字增加按钮,和这个子组件。
function Main() { const [count, setcount] = useState(0) const ShowTime = () => { console.log('now time :' + new Date()) } return ( <Row style={{ 'flex-direction': 'column', }} > <Col> <Title>index:{count}</Title> </Col> <Col> <Button onClick={() => setcount(count + 1)}>increase</Button> </Col> <Col> <ChildComponent fn={ShowTime} /> </Col> </Row> ) }
我们可以看到,在我们点击 increase
按钮的时候,count
发生了增加,这是正常且合理的。
但是这个时候我们打开我们的浏览器控制台,就会发现子组件 ChildComponent
在不停的 render
。
这是不合理的,对于我们来说,子组件应该只受 childname
该参数的影响,如果该参数函数 fn
没发生改变,我们就不应该去 render
。
注意: 这个地方子组件不停
render
的原因在于,这个ShowTime
方法在不停的重新创建,然后导致传给子组件的props
其实是不一样的,因此导致不停render
这个时候我们就用到了 useCallback
。
function Main() { const [count, setcount] = useState(0) const useMemoryCallback = useCallback(() => { console.log('now time :' + new Date()) }, []) return ( <Row style={{ 'flex-direction': 'column', marginLeft: '10px', }} > <Col> <Title>index:{count}</Title> </Col> <Col> <Button onClick={() => setcount(count + 1)}>increase</Button> </Col> <Col> <ChildComponent fn={useMemoryCallback} /> </Col> </Row> ) }
这个时候,我们将这个函数放在 useCallback
中返回,因为 deps
参数为空,所以并没有需要改变的,这样子我们在点击 increase
按钮的时候就不会触发子组件的 render
了。
依赖项数组(deps
)不会作为参数传给回调函数。虽然从概念上来说它表现为:所有回调函数中引用的值都应该出现在依赖项数组中。未来编译器会更加智能,届时自动创建数组将成为可能。
我们推荐启用 eslint-plugin-react-hooks
中的 exhaustive-deps
规则。此规则会在添加错误依赖时发出警告并给出修复建议。
useCallback
给我们带来了记忆函数,结合子组件和useMemo
可以达到优化组件加载的效果。- 如果子组件接受了一个方法作为属性,我们在使用
React.memo
这种避免子组件做没必要的渲染时候,就需要用useCallback
进行配合,否则React.memo
将无意义。
在下节中,我们将为大家介绍 hook 规则
,敬请期待!
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK