React-开发中解决公共代码方案

2,098 阅读1分钟

公共代码解决方案

今天主要谈一下,react组件开发中对于多个组件中使用同一代码段的解决方案,即公共代码的提取方案

假设有这样一个需求,有多个组件使用这样一个功能,获取学生列表

主要组件

学生组件

学生列表组件

模拟数据模块

方案一:自定义Hook

组件结构

方案二:高阶组件

组件结构

方案三:render Props

方案对比

其实高阶组价、render Props都差不多,高阶组件让组件结构变得冗余,而render Props也增加了多余的render属性,都是解决公共代码的方案都不是最优;仔细想一想,我们平时解决公共代码的方案都是通过抽离代码、封装函数,恰好,自定义Hook的方案,让我实现了这一目的并且是使用常规思想解决,一切都是那么自然;利用Hook的特点,分离关注点、让每个State Hook函数只维护自己的状态,每个Effect Hook函数只关注自己的副作用函数

结语

当然,提取公共代码的方案还有很多,比如childern属性(类似render Prop)、重写Componet的生命周期componentDidMount方法等,大同小异,这里就不做过多的赘述,React Hook出现大大优化的这种方案,强烈推荐!