如何将React与React Native中的class based数据模型转换为函数式模型

这类只用来生成结构化数据的纯模型类，本身没有组件生命周期相关的逻辑，改造起来比UI组件简单很多，有几个成熟的落地方案：

方案1：基础工厂函数（最贴合原有使用习惯） #

直接写一个返回指定结构对象的函数就行，初始化调用方式和原来几乎没有区别，学习成本极低：

// 定义模型
export default function createClassModel(id, title, value) {
  return {
    id,
    title,
    value
  }
}

// 组件内使用，和原来new ClassModel的写法几乎一致
const classModel = createClassModel(1, 'Title', someValue)

如果原来的Class里带了原型方法，直接把方法加在返回的对象里就行：

export default function createClassModel(id, title, value) {
  return {
    id,
    title,
    value,
    // 原Class的原型方法直接挪到这里即可
    getFullText() {
      return `${this.title}: ${this.value}`
    }
  }
}

方案2：带公共方法复用的工厂函数 #

如果多个模型需要复用相同的工具方法，可以把公共方法抽离出来，用Object.assign合并，避免每个实例都重复定义方法浪费内存：

// 抽离所有模型通用的公共方法
const modelCommonMethods = {
  logInfo() {
    console.log(`Model id: ${this.id}`)
  }
}

// 定义模型
export default function createClassModel(id, title, value) {
  return Object.assign(Object.create(modelCommonMethods), {
    id,
    title,
    value
  })
}

这种方案和原Class的原型链行为几乎完全一致，公共方法是所有实例共享的，性能和原Class没有差别。

方案3：TypeScript类型约束（仅需要类型校验的场景） #

如果你用TS开发，只是需要约束数据结构，不需要运行时的实例方法，可以直接用类型定义，不需要额外写运行时代码：

export type ClassModel = {
  id: number
  title: string
  value: string | number // 按实际业务定义对应类型即可
}

// 组件内直接声明类型即可使用
const classModel: ClassModel = {
  id: 1,
  title: 'Title',
  value: someValue
}

选型建议 #

• 如果只是简单生成结构化数据，没有自定义方法，直接用基础工厂函数甚至TS类型就足够
• 如果有大量实例方法需要复用，选带公共方法抽离的工厂函数即可，和原Class的性能表现完全一致
• 不用纠结和原Class的使用对齐，这类纯数据模型用函数式写法反而更轻量，也不会有this指向的潜在问题

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