在React/React Native函数式组件中使用类组件是否属于反模式？

结论 #

这种用法完全不属于反模式，可以放心使用。

原因说明 #

• React 从设计之初就保障了类组件与函数组件的向下兼容性，二者可以无缝混用，不存在逻辑、性能层面的额外问题，不管是类组件嵌套函数组件还是函数组件嵌套类组件都符合官方设计规范。
• React Native 生态中大量成熟稳定的老旧第三方组件都是基于类组件实现的，只要功能匹配需求、和你当前使用的 React Native 版本没有兼容性冲突，完全没有必要为了强行统一使用函数组件而自行重构或造轮子。

交互注意事项 #

如果你需要和引入的类组件做交互，比如调用类组件上挂载的实例方法，只需要通过useRef拿到组件实例即可，使用逻辑和在类组件中引入它完全一致，示例如下：

import * as React from 'react';
import { View, Button } from 'react-native';

import ClassComponent from 'SomeOldClassBasedCompont';

export default function TabOneScreen() {
  // 存储类组件实例的ref
  const classCompRef = React.useRef(null);

  const triggerMethod = () => {
    // 调用类组件实例上的自定义方法
    classCompRef.current?.yourCustomMethod();
  }

  return (
    <View>
        <ClassComponent ref={classCompRef} />
        <Button title="触发类组件方法" onPress={triggerMethod} />
     </View>
  );
}

唯一需要规避的场景 #

只有当你使用的类组件已经停止维护，和当前你的项目依赖的React、React Native版本存在明确的兼容性问题时，才需要考虑替换该组件或自行重构实现功能。

内容的提问来源于stack exchange，提问作者jessiPP