可复用 React 的 HOC 以及的 Render Props

重复是不可能的，这辈子都不可能写重复的代码

固然，这句话分分钟都要被产品(领导)打脸，真的最后一次改需求，咱们烦恼于频繁修改的需求

虽然咱们不能改变别人，但咱们却能够尝试去作的更好，咱们须要抽象，封装重复的功能或者逻辑，而不是老旧的重复着机械的复制粘贴修改

那么咱们如何去封装 React 中的组件以及逻辑呢？

此次咱们来说讲 React 里的高级组件

React 高级组件有两种方式:

1. 使用高阶组件( Higher Order Component ==> HOC )
2. 子组件做为函数的模式( Render Props )

高阶组件

首先来讲说高阶组件，它不是 React 的提供的 API，它是模式，一种加强组件的模式，简单来讲其实就是高阶函数，高阶函数你们应该不陌生

高阶函数 : 把函数做为参数传入，返回一个新的函数，这样的函数称为高阶函数

而所谓的高阶组件也就是传入一个现有组件做为参数，返回一个新的组件，高阶租价也分为代理方式和继承方式
咱们先来看看一个简单的 HOC :

import React from 'react';

function addNameProp(WrapperComponent) {
  return class extends React.Component {
    render() {
      const { name, ...props } = this.props;
      return <WrapperComponent {...props} name={name || 'cnyballk'} />;
    }
  };
}

export default addNameProp;

在上面的代码里咱们定义了一个 addNameProp。 函数，它的做用就是为没有传入 name 的 prop 传入的组件添加一个 name 的 prop ，而后渲染出来

这个高阶组件就完成了对传入组件的加强，这也是一个代理方式的高阶组件，

那么继承方式是怎么样的呢

import React from 'react';

function addNameProp(WrapperComponent) {
  return class extends WrapperComponent {
    render() {
      this.props = {
        ...this.props,
        name: this.props.name || 'cnyballk',
      };
      return super.render();
    }
  };
}

export default addNameProp;

和上面的高阶组件 同样的效果，而继承模式和代理模式最大的区别就是一个是返回传入的组件，一个是调用继承的父组件的 render 方法

⚠️ 在代理模式下 WrapperComponent 经历了完整的生命周期，返回的组件也有一次完整的生命周期，而继承模式 则是调用了 WrapperComponent 的 render ，只有返回的组件的一个生命周期

若是咱们用过 react-redux 的 connect 也就知道 connect 也是一个代理模式的高阶组件

⚠️ 高阶组件能够这么使用

@Wrapper
class Index extends Component {
   ...略
}

emmmm...这个涉及到 js 的装饰器，各位本身去搜来学习哈

Render Props

那么咱们已经认识了高阶组件的重用方法，也认识到了高阶组件的优势。

可是高阶组件的缺点是什么呢？

相信大家也能看到了，咱们传递一个 name 的 Prop ，那是否是得传入的组件可以处理才能够，并且还有命名的冲突危险，毕竟有些组件的 props 命名各有不一样，或者说子组件须要同一份数据处理方式却不同，因此说这个时候就不适用 HOC 了

HOC 对于使用者来讲是一个黑盒，还须要去看他们的实现

而 Render Props 则是 数据给你，其余的你本身来
咱们来看一个简单的例子

import React from 'react';

class AddNameProp extends React.Component {
  render() {
    const name = 'cnyballk';
    return this.props.children(name);
  }
}

export default AddNameProp;

简单的使用

<AddNameProp>{name => <div>我叫 {name}</div>}</AddNameProp>

想传递给组件

<AddNameProp>
  {name =>
    <Hello name={name}/>;
  }
</AddNameProp>

或者是其余的 prop 名

<AddNameProp>
  {name =>
    <Hello myName={name}/>;
  }
</AddNameProp>

咱们能够看到，这个方式很灵活，由于子组件是一个函数，一切皆有可能，可是 Render Props 也有缺点就是难以作性能优化，高阶组件能够利用 SCU 来避免重复渲染。虽然这样，，Render Props 倒是一个很是好(牛逼)的一个模式，我很喜欢

Render Props VS HOC

咱们可以清楚的明白，HOC是一种粗粒度的代码复用，而Render Props是一种细粒度的复用，他们能够互换，咱们何时用HOC，何时用Render Props相信你们也差很少清楚了

小结

本文介绍了 React 的高级组件的两个方式，各有优缺点，但它们都是为了重用代码，咱们能够本身选择喜欢的模式去作，可是不要复制粘贴了，感觉封装复用的力量

高阶组件代理模式能够更好的控制和实现，继承模式则能够控制特定组件的生命周期，与高阶组件相比， Render Props 模式更加灵活，有函数，咱们能够更自由