React Hook丨真正的逻辑复用

最新推荐文章于 2025-09-08 11:21:28 发布

原创

最新推荐文章于 2025-09-08 11:21:28 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

本文探讨了React中逻辑复用的两种方法——HOC（高阶组件）和自定义Hook。通过举例说明，HOC虽然能实现逻辑复用，但可能会导致组件嵌套和命名冲突。而自定义Hook则提供了更简洁、避免命名覆盖的解决方案，让代码组织更加直观，降低了出错的可能性。总结中指出，自定义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: t