React 进阶面试题, 为什么使用 React.memo 和 React.forwardRef 包装的组件会提示 children 类型不匹配?
React 进阶面试题, 为什么使用 React.memo 和 React.forwardRef 包装的组件会提示 children 类型不匹配?
QA
Step 1
Q:: 为什么使用 React.memo 和 React.forwardRef 包装的组件会提示 children 类型不匹配？
A:: 这个问题通常出现在使用 TypeScript 的 React 应用中，因为 TypeScript 会严格检查组件的 prop 类型。当你使用 React.memo 包装组件时，它会创建一个高阶组件，React.forwardRef 也是类似。默认情况下，TypeScript 无法自动推断这些高阶组件生成的新组件的 props 类型，尤其是在涉及 children 时。这可能导致类型不匹配的错误。解决这个问题的方法之一是明确为高阶组件定义 props 类型，或者在创建组件时指定类型。
Step 2
Q:: React.memo 的工作原理是什么？
A:: React.memo 是一个高阶组件，它用于性能优化。React.memo 通过浅比较 props 的方式来决定是否重新渲染组件。如果传递给组件的 props 没有变化，React.memo 包装的组件将跳过渲染，使用之前的渲染结果。React.memo 对于那些在相同 props 下渲染结果不会变化的函数组件非常有用，能减少不必要的重新渲染，提高性能。
Step 3
Q:: 什么是 React.forwardRef，它的用途是什么？
A:: React.forwardRef 是 React 提供的一个函数，用于传递 ref 给函数组件。默认情况下，函数组件没有 ref 属性。通过使用 React.forwardRef，你可以让函数组件接收 ref，并将其传递给 DOM 元素或类组件。这在需要直接访问子组件的 DOM 元素或实例时非常有用，例如在处理焦点、文本选择或动画时。
Step 4
Q:: 在什么情况下使用 React.memo 可能不会带来性能提升？
A:: React.memo 适用于那些接收相同 props 时渲染结果不会变化的组件。然而，如果组件的 props 经常发生变化，或者组件内部逻辑复杂导致浅比较成本较高，使用 React.memo 可能不会带来性能提升，甚至可能由于浅比较的开销导致性能下降。在这种情况下，React.memo 的使用应谨慎评估。