React Hooks useCallback理解

个人理解记录，如有错误 欢迎指出

在react函数式组件中定义函数 如：

export default props => {

	const handle = () => {
		console.log(11111)
	}
	
	return (
		<button onClick={handle}>点击</button>
	)
}

每次组件重新渲染，函数handle都会重新声明，使用useCallback后会缓存函数

export default props => {

	const handle = useCallback(() => {
		console.log(11111)
	}, [])
	
	return (
		<button onClick={handle}>点击</button>
	)
}

只会在useCallback的依赖变更后才会重新声明

但并不是所有的函数都需要useCallback，因为useCallback本身就存在性能开销，如果仅仅只是缓存函数是不必要的

下面是一个使用示例

const Child = ({ onClick }) => {
	return (
		<button onClick={onClick}>点击</button>
	)
}

export default props => {
	const [ value, setValue ] = useState(0)
	const handle = useCallback(() => {
		console.log(11111)
	}, [])
	const addValue = () => {
		setValue(value+1)
	}
	return (
		<div>
			<Child onClick={ handle } />
			<div>{ value }</div>
			<button onClick={ addValue }>点击</button>
		</div>
	)
}

在上面的示例中，如果没有使用useCallback缓存handle函数，那么每次在调用addValue函数改变value时，handle函数都会被重新声明，传给Child子组件的 onClick 都会是一个全新的函数从而导致Child组件被重新渲染，但这是不必要的