高阶组件案例

有一个 Student List，
{
id, name, grade
}

有一个 Teacher List，
{
id, name, subject, like
}

前奏

点击查看【codepen】
功能实现了，但把所有的东西暴露在跟 List 无关的地方
在 App 中

  • state 的内容其实跟 App 是没有关系，App 只是承载视图
  • 请求数据
  • Teacher 和 Student 中的处理函数

这些会造成 App 非常地臃肿

使用高阶组件

HOC High Order Component

  1. HOC 不是 React 提供的 API，只是一个高级的设计模式
  2. HOC 是一个函数，接收一个组件参数， 返回一个新组件
  3. 普通组件返回的是 UI， HOC 返回的是一个新组件
  4. HOC 不能修改参数组件，只能传入组件所需要的 props
  5. HOC 是一个没有副作用的纯函数
  6. HOC 除了必须填入被包裹的组件参数以外，其余参数根据需求增加
  7. HOC 不关心数据如何使用，包裹组件不关心数据从哪里来
  8. HOC 和 包裹组件直接唯一的契合点就是 props

点击查看【codepen】