react学习—Callback Hook

一、Callback Hook

函数名：useCallback

用于得到一个固定引用值的函数，通常用它进行性能优化

useCallback:

该函数有两个参数：

1. 函数，useCallback会固定该函数的引用，只要依赖项没有发生变化，则始终返回之前函数的地址
2. 数组，记录依赖项

该函数返回：引用相对固定的函数地址

例：

//App.js
import React, { useState } from 'react'
class Test extends React.PureComponent {
	render() {
		console.log("Test Render")
		return (
			<div>
				<h1>{this.props.text}</h1>
				<button onClick={this.props.onClick}>点击</button>
			</div>
		)
	}
}
function Parent() {
	console.log("Parent Render")
	const [text, setText] = useState(123)
	return (
		<div>
			<Test text={text} onClick={() => {
				setText(123);
			}} />
		</div>
	)
}
export default function App() {
	return (
		<div>
			<Parent />
		</div>
	)
}

如上代码，由于useState使用的Object.is浅比较，前后设置的值一致，所以并没有触发重新渲染。

function Parent() {
	console.log("Parent Render")
	const [text, setText] = useState(123)
	const [n, setN] = useState(0)
	return (
		<div>
			<Test text={text} onClick={() => {
				setText(123);
			}} />
			<input type="number"
				value={n}
				onChange={e => {
					setN(parseInt(e.target.value))
				}}
			/>
		</div>
	)
}

但是我们发现Test组件已经是一个纯组件，我们改变input的value而已，为什么Test也要重新渲染。
原来onChange事件使得Parent重新调用，所以每次Test的onClick都会成为一个新函数。这就是博主在前面提到的使用纯组件赋予事件时避免在元素中声明。

如何在当前情况下固定一个函数的引用地址，从而达到性能优化的目的呢？使用useCallback

function Parent() {
	console.log("Parent Render")
	const [text, setText] = useState(123)
	const [n, setN] = useState(0)
	const handleClick = useCallback(() => {
			setText(text+1)
	},[text])
	return (
		<div>
			<Test text={text} onClick={handleClick} />
			<input type="number"
				value={n}
				onChange={e => {
					setN(parseInt(e.target.value))
				}}
			/>
		</div>
	)
}

博主开始运营自己的公众号啦，感兴趣的可以关注“飞羽逐星”微信公众号哦，拿起手机就能阅读感兴趣的博客啦！