React 中的高阶组件 HOC 详解-JavaScript中文网-JavaScript教程资源分享门户

React 是一个流行的 JavaScript 库，用于构建用户界面。其中一个主要的特性是组件化，可以将 UI 拆分成小的可重用的组件。在 React 中，高阶组件（Higher-Order Component，HOC）是一种非常有用的模式，可以帮助我们更好地组织和复用组件代码。

什么是高阶组件

高阶组件是一个函数，它接受一个组件作为参数，并返回一个新的增强组件。通俗点说，就是将一个组件作为输入，返回另一个新的组件。

function withHOC(WrappedComponent) {
  return class extends React.Component {
    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
}

在上面的代码中，withHOC 函数接受一个名为 WrappedComponent 的组件作为参数，并返回一个新的组件，这个新组件将 WrappedComponent 作为其子组件进行渲染。

高阶组件的作用

高阶组件最常见的作用是用来增强组件的功能。它可以在不修改原始组件的情况下，动态地添加一些新的功能或行为。例如，我们可以创建一个名为 withLogger 的高阶组件，它可以在组件渲染时输出一条日志。

// www.javascriptcn.com code example
function withLogger(WrappedComponent) {
  return class extends React.Component {
    componentDidMount() {
      console.log(`Component ${WrappedComponent.name} has been mounted`);
    }

    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
}

在上面的代码中，withLogger 函数返回一个新的组件，在这个新组件的 componentDidMount 生命周期方法中，会输出一条日志，记录当前组件的名称。我们可以使用这个高阶组件来增强任何一个组件的功能。

const EnhancedComponent = withLogger(MyComponent);

在上面的代码中，我们使用 withLogger 高阶组件来增强 MyComponent 组件的功能，将增强后的组件赋值给 EnhancedComponent 变量。

除了增强组件的功能外，高阶组件还可以用来解决一些横切关注点的问题，例如登录验证、权限控制、数据获取等。我们可以在高阶组件中实现这些逻辑，然后将增强后的组件作为输出，使得组件本身只需要关注自己的业务逻辑，而不需要关注这些横切关注点。

高阶组件的注意点

虽然高阶组件非常有用，但是在使用时也需要注意一些问题。

1. 命名冲突

在使用高阶组件时，有可能会出现命名冲突的情况。例如，我们使用 withLogger 高阶组件对 MyComponent 进行增强，得到的新组件名称为 EnhancedComponent，如果我们再次使用 withLogger 对 EnhancedComponent 进行增强，那么得到的新组件名称也是 EnhancedComponent，这样就出现了命名冲突。

为了避免这种情况，我们可以使用 displayName 属性来为组件指定一个显示名称。例如：

// www.javascriptcn.com code example
function withLogger(WrappedComponent) {
  class Logger extends React.Component {
    componentDidMount() {
      console.log(`Component ${WrappedComponent.displayName} has been mounted`);
    }

    render() {
      return <WrappedComponent {...this.props} />;
    }
  };

  Logger.displayName = `withLogger(${WrappedComponent.displayName || WrappedComponent.name})`;

  return Logger;
}

在上面的代码中，我们为 Logger 组件指定了一个 displayName 属性，这个属性的值是一个字符串，包含了原始组件的名称和增强组件的名称。

2. 不要修改原始组件

在编写高阶组件时，我们要注意不要修改原始组件的属性和状态。这样做会导致组件的行为变得不可预测，可能会引发一些难以调试的问题。

如果需要修改组件的属性和状态，应该通过属性代理的方式进行。例如，我们可以将某个属性传递给原始组件，并在高阶组件中对这个属性进行修改。

// www.javascriptcn.com code example
function withHOC(WrappedComponent) {
  return class extends React.Component {
    render() {
      const newProps = {
        ...this.props,
        name: this.props.name.toUpperCase(),
      };

      return <WrappedComponent {...newProps} />;
    }
  };
}

在上面的代码中，我们将 name 属性传递给原始组件，并在高阶组件中将其转换为大写字母。这样做不会修改原始组件的属性，而是创建了一个新的属性对象，将修改后的属性传递给原始组件。

高阶组件的应用示例

下面是一个使用高阶组件实现表单验证的示例代码。

// www.javascriptcn.com code example
function withFormValidator(WrappedComponent) {
  return class extends React.Component {
    constructor(props) {
      super(props);

      this.state = {
        errors: {},
      };

      this.validators = {};
    }

    validateField(name, validator) {
      this.validators[name] = validator;
    }

    validateAllFields() {
      const errors = {};

      for (const name in this.validators) {
        const validator = this.validators[name];
        const value = this.props[name];

        const error = validator(value);

        if (error) {
          errors[name] = error;
        }
      }

      this.setState({ errors });
    }

    render() {
      const newProps = {
        ...this.props,
        errors: this.state.errors,
        validateField: this.validateField.bind(this),
        validateAllFields: this.validateAllFields.bind(this),
      };

      return <WrappedComponent {...newProps} />;
    }
  };
}

在上面的代码中，我们定义了一个名为 withFormValidator 的高阶组件，它接受一个组件作为参数，并返回一个新的增强组件。这个增强组件包含了表单验证的逻辑。具体来说，它定义了两个方法 validateField 和 validateAllFields，用于对表单字段进行验证，并将错误信息保存在组件的状态中。

使用这个高阶组件时，我们可以将需要进行表单验证的组件作为参数传递给它。

// www.javascriptcn.com code example
class LoginForm extends React.Component {
  render() {
    return (
      <form>
        <input type="text" name="username" onChange={this.props.onChange} />
        <input type="password" name="password" onChange={this.props.onChange} />
        <button onClick={this.props.onSubmit}>Login</button>
      </form>
    );
  }
}

const EnhancedLoginForm = withFormValidator(LoginForm);

class App extends React.Component {
  handleSubmit() {
    this.props.validateAllFields();

    if (Object.keys(this.props.errors).length === 0) {
      console.log('Form submitted successfully');
    } else {
      console.log('Form validation failed');
    }
  }

  render() {
    return (
      <div>
        <EnhancedLoginForm
          onChange={this.props.onChange}
          onSubmit={this.handleSubmit.bind(this)}
          validateField={this.props.validateField}
          validateAllFields={this.props.validateAllFields}
          errors={this.props.errors}
        />
      </div>
    );
  }
}

const EnhancedApp = withFormValidator(App);

在上面的代码中，我们将 LoginForm 组件作为参数传递给 withFormValidator 高阶组件，得到一个新的增强组件 EnhancedLoginForm。然后，我们将 EnhancedLoginForm 组件作为子组件传递给 App 组件，并将 validateField 和 validateAllFields 方法以及 errors 属性传递给它。这样，App 组件就可以对表单进行验证，并根据验证结果来决定是否提交表单。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d90af6a941bf7134078113

React 中的高阶组件 HOC 详解