父组件向自组件传递一个函数，旨在子组件可以操作父组件的一些状态等，这是很正常的事情，但是还是难逃我的眼睛：子组件在疯狂地渲染，造成页面闪烁。

问题复现

父组件：

import Child from './Child'

const Parent = () => {
  const foo = () => {
    /* 做点事情，改变 Parent 组件的状态 */
  }
  
  return (
    <>
      <Child handler={foo}>
    </>
  )
}

子组件：

const Child = (props) => {
  const { handler } = props
 
  return <div 
    onClick={() => {
      handler()
    }>
  </div>
}

export default Child

解决方法

将父组件向子组件传递的函数通过 useCallback 这个钩子包一层，意思是把这个函数通过 hook 缓存下来。

如果不这么做，每当父组件重新渲染，那么必定有一个新的 handler 函数变量传递给 Child 组件，props 发生变化，那么 Child 组件必定重绘，造成闪烁。

import React, { useCallback } from 'react'

const Parent = () => {
  const foo = useCallback(() => {
    /* 做点事情，改变 Parent 组件的状态 */
  }, [])
  
  return (
    <>
      <Child handler={foo}>
    </>
  )
}