组件re-render问题

向使用React.memo的组件传递函数作为props时,依然会引起re-render

const Item = React.memo(...);

const List = () => {
  const fn = (e) => {
    // ...
  };

  return <Item propName={fn} />
}

解决方式是可以使用useCallback

const fn = useCallback((e) => {
  // ...
}, []); // 依赖项数组

useCallback会返回函数的memoized版本,只在依赖的项目发生改变时候才会更新,可以用来避免不必要的渲染子组件(需要配合React.memo食用)。

useCallback(fn, deps)相当于useMemo(() => fn, deps)

参考:
Hooks API Reference – React
javascript - React memo components and re-render when passing function as props - Stack Overflow

Comments
Write a Comment