DEV Community
·
React 基础：渲染性能与 useCallback
原文英文，约300词，阅读约需1分钟。
📝
内容提要
即使使用 `memo` 包装子组件，当函数作为 `props` 传递时，子组件仍会重新渲染。在 `Example.js` 中，通过 `useCallback` 包装 `clickHandler` 函数可以避免这种情况，提高性能。
🎯
关键要点
-
即使使用 memo 包装子组件，子组件仍可能重新渲染。
-
当函数作为 props 传递给子组件时，子组件会重新渲染。
-
在 Example.js 中，clickHandler 函数会导致子组件重新渲染。
-
使用 useCallback 包装 clickHandler 函数可以避免子组件重新渲染，提高性能。
❓
延伸问答
为什么子组件即使使用 memo 仍然会重新渲染？
子组件会重新渲染是因为函数作为 props 传递给子组件时，导致子组件的引用发生变化。
如何使用 useCallback 来提高渲染性能？
通过使用 useCallback 包装 clickHandler 函数，可以避免子组件因函数引用变化而重新渲染，从而提高性能。
在 React 中，memo 的作用是什么？
memo 用于优化子组件的渲染，避免不必要的重新渲染，但在函数作为 props 传递时仍可能失效。
在 Example.js 中，clickHandler 函数的作用是什么？
clickHandler 函数用于更新 countB 的状态，每次点击按钮 B 时会增加 countB 的值。
如何避免子组件因父组件状态变化而重新渲染？
可以通过将处理函数使用 useCallback 包装，确保函数引用不变，从而避免子组件重新渲染。
在 React 中，useCallback 的基本用法是什么？
useCallback 用于返回一个 memoized 的回调函数，只有在依赖项变化时才会更新。
🏷️
