React Hook丨真正的逻辑复用

说起逻辑复用，熟悉 react 小伙伴们一口道出了 HOC [高阶组件] 。没错，高阶组件可以实现逻辑复用，在 hook 之前 react 还有挺多不错的方案。那么，让我们来浅谈 HOC 与 自定义 hook。

HOC逻辑复用

说起HOC，我想到了两个标签：

1.【嵌套】

2.【一直嵌套】

让我们来深入场景，举个例子：

以封装一个 input 双向绑定为例

我们经常会这样去做一个双向绑定

// ...
state = {
  value: 1
};
onChange = (e: any) => {
  this.setState({
    value: e.target.value
  });
};
// ...
<input value={this.state.value} onChange={this.onChange} />;
复制代码

假设在一个组件内有多个 input 我们希望可以更好的去复用「双向绑定」的逻辑，于是我们对这块逻辑用 HOC 进行抽象：

HOCInput.tsx

const HOCInput = (WrappedComponent: any) => {
  return class extends React.Component<
    {},
    {
      fields: {
        [key: string]: {
          value: string;
          onChange: (e: any) => void;
        };
      };
    }
  > {
    constructor(props: any) {
      super(props);
      this.state = {
        fields: {}
      };
    }
    setField = (name: string) => {
      if (!this.state.fields[name]) {
        this.state.fields[name] = {
          value: "",
          onChange: (event: any) => {
            this.state.fields[name].value = event.target.value;
            this.forceUpdate();
          }
        };
      }
      return {
        value: this.state.fields[name].value,
        onChange: this.state.fields[name].onChange
      };
    };
    g