React中高阶组件、Render props、hooks

这三者都是react中解决代码复用的主要方式：

1、HOC

在官方解释中：

高阶组件（HOC）是 React 中复用组件逻辑的一种高级技巧。HOC自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的一种设计模式。

简而言之，HOC 是一种组件的设计模式，HOC 接收一个组件和额外的参数，返回一个新的组件。HOC 是纯函数，没有副作用。

function withSubscription(WrappedComponent, selectData) {
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        data: selectData(DataSource, props)
      };
    }
    // 一些通用的逻辑处理
    render() {
      // ... 并使用新数据渲染被包装的组件!
      return ;
    }
  };

// 使用
const BlogPostWithSubscription = withSubscription(BlogPost,
  (DataSource, props) => DataSource.getBlogPost(props.id));

HOC的优缺点：

优点：逻辑复用、不影响被包裹组件的内部逻辑。

缺点：hoc 传递给被包裹组件的props容易和被包裹后的组件重名，进而被覆盖。

2、Render props

在官方解释中：

Render props 是指一种在 React 组件之间使用一个值为函数的 prop 共享代码的简单技术。

更具体的说 render prop 是一个告知组件需要渲染什么内容的函数 prop。

// DataProvider组件内部的渲染逻辑如下
class DataProvider extends React.Components {
     state = {
    name: 'Tom'
  }

    render() {
    return (
        

          
共享数据组件自己内部的渲染逻辑
          { this.props.render(this.state) }
      
    );
  }
}

// 调用方式
 (
  
Hello {data.name}
)}/>

由此可以看到， render props 的优缺点也很明显：

优点：数据共享、代码复用，将组件内的 state 作为 props传递给调用者，将渲染逻辑交给调用者。

缺点：无法在 return 语句外访问数据、嵌套写法不够优雅

3、Hooks

在官方解释中：

Hook 是 React 16.8的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。通过定义hook，可以复用代码逻辑

通常情况下， render props 和高阶组件只渲染一个子节点，而让 Hooks 来服务这个使用场景更加简单。在大部分场景下，Hook 就足够了，并且能帮助减少嵌套。

// 自定义一个获取订阅数据的hook
function useSubscription() {
  const data = DataSource.getComments();
  return [data];
}
// 
function CommentList(props) {
  const {data} = props;
  const [subData] = useSubscription();
    ...
}
// 使用

从上面可以看出，hook 解决了 hoc 的prop 覆盖问题，同时使用的方式解决了 render props 的嵌地狱的问题。

hook 的优点如下：

（1）使用直观

（2）解决 hoc 的 prop 重名问题

（3）解决 render props 因共享数据 而出现嵌套地狱的问题

（4）能在 return 之外使用数据的问题

注意：hook只能在组件顶层使用，不可在分支语句中使用

区别总结：

HOC、 render props 和 hook 都是为了解决代码复用的问题，但是 hoc 和 render props 都有特定的使用场景和明显的缺点。hook 是 React 16.8 更新的新的 API，让组件逻辑复用更简洁明了，同时也解决了 hoc 和 render props 的一些缺点