克拉玛依商城网站建设平台,郑州住房和城乡建设局网站,广州网站开发建设,网站防采集一、Callback Hook 函数名#xff1a;useCallback
用于得到一个固定引用值的函数#xff0c;通常用它进行性能优化。
useCallback:
该函数只需要传入两个参数#xff1a;一个回调函数和一个依赖数组即可。
1.函数#xff0c;useCallback会固定该函数的引用#xff0c;…一、Callback Hook 函数名useCallback
用于得到一个固定引用值的函数通常用它进行性能优化。
useCallback:
该函数只需要传入两个参数一个回调函数和一个依赖数组即可。
1.函数useCallback会固定该函数的引用只要依赖项没有发生变化则始终返回之前函数的地址。 2.数组记录依赖项。
该函数会返回一个函数地址。
// 子组件
class Test extends React.PureComponent {render() {console.log(Test Render)return (divh1{this.props.text}/h1button onClick{this.props.onClick}点击/button/div)}
}
// 父组件
function Parent() {console.log(Parent Render)const [text, setText] useState(123)const [n, setN] useState(0)const handleClick useCallback(() {setText(text1)},[text])return (div//Test text{text} onClick{handleClick} /input typenumbervalue{n}onChange{e {setN(parseInt(e.target.value))}}//div)
}
当修改input输入框值n时虽然父组件渲染了但由于传给子组件的handleClick 引用的地址没变因为handleClick 依赖于text属性所以子组件也不会重新渲染。其中onClick{handleClick} 这段话本质上也是将handleClick外边的{}是jsx语法作为属性传递给了子组件因为属性未变所以子组件也不会变化重渲染子组件继承了PureComponent 若不使用useCallback则子组件也会重新渲染。
