一、在组件中使用useCallback定义函数，能否带来性能优化？
export default memo(function Main() {
const [count, setCount] = useState(0)
const increment = () => {
setCount(count+1)
}
return (
<div>
</div>
)
})
在函数式组件中，直接定义increment，每次组件渲染，increment函数都会重新定义
const increment = useCallback(() => {
setCount(count+1)
})
通过useCallback，将函数作为参数包裹起来，increment的引用不会变，但是作为参数的函数，仍然会重新定义。
const increment = useCallback(() => {
setCount(count+1)
}, [])
useCallback第二个参数为空数组时，会存在闭包陷阱，虽然useCallback的第一个参数每次都会重新定义，但是因为依赖没有发生变法，依然取的是第一次定义的函数，所以count一直是最开始的值。
如果想要increment能获取到正确的执行结果：
const increment = useCallback(() => {
setCount(count+1)
}, [count])
得出结论：使用useCallback定义一个函数不会带来性能的优化
二：使用useCallback定义一个函数传递给子组件，是否会带来性能优化?
export default memo(function App() {
const [count, setCount] = useState(0)
const [message, setMessage] = useState('')
const increment = useCallback(() => {setCount(count + 1)}, [count])
return (
<div>
<h2>Count: {count}</h2>
<button onClick={increment}>+</button>
<HelloWord increment={increment} />
<button onClick={() => setMessage(Math.random())}>修改message{message}</button>
</div>
)
})
export default memo(function HelloWorld(props) {
console.log('HelloWord重新渲染')
return (
<div>
<h2>HelloWord</h2>
<button onClick={() => props.increment()}>increment+</button>
</div>
)
})
将通过useCallback定义的方法传递给子组件，当count发生变化时，子组件依然会重新渲染，因为increment依赖count，当父组件的message发生变化时，不会影响子组件的渲染。但是当count变化时，我们也不想让子组件重新渲染。
可以利用useRef的特性，组件多次渲染，useRef的值保持不变
const countRef = useRef()
countRef.current = count
const increment = useCallback(
() => {
console.log('increment被执行', count)
setCount(countRef.current + 1)
}, []
)
这样increment没有依赖，回调函数取的是第一次创建的函数，但是通过countRef.current来获取count最新的结果。依然可以正常setCount最新的值。这样当count发生变化时，子组件就不会再次渲染了。
