MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

React 高阶组件在项目重构中的作用

2023-01-185.4k 阅读

1. React 高阶组件概述

React 高阶组件（Higher - Order Component，简称 HOC）并不是 React API 的一部分，而是一种基于 React 的设计模式。它是一个函数，接收一个组件作为参数，并返回一个新的组件。

从本质上来说，高阶组件是对 React 组件的一种包装和增强。就像是给原组件披上了一层“外衣”，这层“外衣”可以赋予原组件新的特性和功能，同时又不改变原组件的内部实现。这种设计模式遵循了“组合优于继承”的原则，使得代码更加灵活、可复用且易于维护。

1.1 高阶组件的基本结构

下面通过一个简单的代码示例来展示高阶组件的基本结构：

// 高阶组件函数
function withLogging(WrappedComponent) {
  return class extends React.Component {
    componentDidMount() {
      console.log(`Component ${WrappedComponent.name} has mounted.`);
    }
    componentWillUnmount() {
      console.log(`Component ${WrappedComponent.name} is about to unmount.`);
    }
    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
}

// 被包装的组件
class MyComponent extends React.Component {
  render() {
    return <div>My Component</div>;
  }
}

// 使用高阶组件包装 MyComponent
const EnhancedComponent = withLogging(MyComponent);

在上述代码中，withLogging 就是一个高阶组件。它接收 WrappedComponent 作为参数，并返回一个新的类组件。这个新组件增加了 componentDidMount 和 componentWillUnmount 生命周期方法，用于在组件挂载和卸载时打印日志。原组件 MyComponent 的功能保持不变，只是被包裹在高阶组件中获得了额外的日志记录功能。

2. 项目重构中的常见问题

在项目开发过程中，随着业务的不断增长和需求的变更，代码库会逐渐变得庞大和复杂，从而出现各种问题，这些问题为项目的维护和扩展带来了挑战，而 React 高阶组件在解决这些问题时发挥着重要作用。

2.1 代码重复问题

在大型项目中，常常会出现多个组件具有相似功能的情况。例如，多个组件都需要进行权限验证，判断用户是否具有访问该组件的权限。如果每个组件都单独实现权限验证逻辑，就会导致大量的代码重复。

// 组件 A
class ComponentA extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isAuthorized: false
    };
  }
  componentDidMount() {
    // 模拟权限验证逻辑
    const userRole = 'guest';
    if (userRole === 'admin') {
      this.setState({ isAuthorized: true });
    }
  }
  render() {
    if (!this.state.isAuthorized) {
      return <div>You are not authorized to view this component.</div>;
    }
    return <div>Component A content</div>;
  }
}

// 组件 B
class ComponentB extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isAuthorized: false
    };
  }
  componentDidMount() {
    // 模拟权限验证逻辑
    const userRole = 'guest';
    if (userRole === 'admin') {
      this.setState({ isAuthorized: true });
    }
  }
  render() {
    if (!this.state.isAuthorized) {
      return <div>You are not authorized to view this component.</div>;
    }
    return <div>Component B content</div>;
  }
}

在上述代码中，ComponentA 和 ComponentB 都实现了相似的权限验证逻辑，这不仅增加了代码量，还使得代码维护变得困难。一旦权限验证逻辑发生变化，就需要在多个组件中进行修改，容易出现遗漏和不一致的情况。

2.2 组件耦合度高

在项目中，有些组件可能依赖于特定的外部环境或服务，例如全局状态管理工具（如 Redux）、数据请求库（如 Axios）等。这种依赖会导致组件与特定的库或服务紧密耦合，使得组件的复用性降低。

import React from'react';
import axios from 'axios';

class UserComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      user: null
    };
  }
  componentDidMount() {
    axios.get('/api/user')
    .then(response => {
        this.setState({ user: response.data });
      })
    .catch(error => {
        console.error('Error fetching user:', error);
      });
  }
  render() {
    if (!this.state.user) {
      return <div>Loading user...</div>;
    }
    return <div>User: {this.state.user.name}</div>;
  }
}

在上述代码中，UserComponent 直接依赖于 axios 库进行数据请求。如果项目后期需要更换数据请求库，就需要修改 UserComponent 的代码，这增加了代码的维护成本。而且，该组件很难在不依赖 axios 的环境中复用。

2.3 组件功能单一性被破坏

随着项目的发展，有些组件可能会逐渐承担过多的功能。例如，一个展示用户信息的组件，除了展示用户数据，还可能负责数据的获取、缓存管理以及权限验证等功能。这种情况下，组件的功能变得复杂，违反了单一职责原则，使得组件的调试和维护变得困难。

class ComplexUserComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      user: null,
      isAuthorized: false,
      cache: {}
    };
  }
  componentDidMount() {
    // 权限验证
    const userRole = 'guest';
    if (userRole === 'admin') {
      this.setState({ isAuthorized: true });
    }
    // 数据获取
    if (this.state.isAuthorized) {
      if (this.state.cache['/api/user']) {
        this.setState({ user: this.state.cache['/api/user'] });
      } else {
        axios.get('/api/user')
        .then(response => {
            this.setState({ user: response.data });
            this.state.cache['/api/user'] = response.data;
          })
        .catch(error => {
            console.error('Error fetching user:', error);
          });
      }
    }
  }
  render() {
    if (!this.state.isAuthorized) {
      return <div>You are not authorized to view this component.</div>;
    }
    if (!this.state.user) {
      return <div>Loading user...</div>;
    }
    return <div>User: {this.state.user.name}</div>;
  }
}

在上述代码中，ComplexUserComponent 同时承担了权限验证、数据获取和缓存管理等功能，使得组件的逻辑变得复杂，难以理解和维护。

3. React 高阶组件在项目重构中的作用

React 高阶组件在解决项目重构中遇到的上述问题时具有显著的优势，能够有效地提升代码的质量和可维护性。

3.1 解决代码重复问题

通过将重复的逻辑提取到高阶组件中，可以避免在多个组件中重复编写相同的代码。以权限验证为例，可以创建一个权限验证的高阶组件，然后将需要权限验证的组件传递给该高阶组件。

function withAuthorization(WrappedComponent) {
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        isAuthorized: false
      };
    }
    componentDidMount() {
      // 模拟权限验证逻辑
      const userRole = 'guest';
      if (userRole === 'admin') {
        this.setState({ isAuthorized: true });
      }
    }
    render() {
      if (!this.state.isAuthorized) {
        return <div>You are not authorized to view this component.</div>;
      }
      return <WrappedComponent {...this.props} />;
    }
  };
}

// 组件 A
class ComponentA extends React.Component {
  render() {
    return <div>Component A content</div>;
  }
}

// 使用高阶组件包装 ComponentA
const AuthorizedComponentA = withAuthorization(ComponentA);

// 组件 B
class ComponentB extends React.Component {
  render() {
    return <div>Component B content</div>;
  }
}

// 使用高阶组件包装 ComponentB
const AuthorizedComponentB = withAuthorization(ComponentB);

在上述代码中，withAuthorization 高阶组件封装了权限验证逻辑。ComponentA 和 ComponentB 通过该高阶组件获得了权限验证功能，而不需要在各自组件内部重复实现权限验证代码。这样不仅减少了代码量，还使得权限验证逻辑的修改更加集中和方便。一旦权限验证规则发生变化，只需要在 withAuthorization 高阶组件中进行修改，所有使用该高阶组件的组件都会自动应用新的规则。

3.2 降低组件耦合度

高阶组件可以将组件与特定的外部依赖解耦，提高组件的复用性。以数据请求为例，可以创建一个数据请求的高阶组件，将数据请求逻辑从具体的组件中分离出来。

function withDataFetching(WrappedComponent, url) {
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        data: null,
        isLoading: false
      };
    }
    componentDidMount() {
      this.setState({ isLoading: true });
      axios.get(url)
      .then(response => {
          this.setState({ data: response.data, isLoading: false });
        })
      .catch(error => {
          console.error('Error fetching data:', error);
          this.setState({ isLoading: false });
        });
    }
    render() {
      if (this.state.isLoading) {
        return <div>Loading...</div>;
      }
      return <WrappedComponent data={this.state.data} {...this.props} />;
    }
  };
}

// 组件 A
class ComponentA extends React.Component {
  render() {
    return <div>{this.props.data && `Data from ComponentA: ${this.props.data.value}`}</div>;
  }
}

// 使用高阶组件包装 ComponentA 并指定数据请求 URL
const DataFetchedComponentA = withDataFetching(ComponentA, '/api/dataA');

// 组件 B
class ComponentB extends React.Component {
  render() {
    return <div>{this.props.data && `Data from ComponentB: ${this.props.data.value}`}</div>;
  }
}

// 使用高阶组件包装 ComponentB 并指定数据请求 URL
const DataFetchedComponentB = withDataFetching(ComponentB, '/api/dataB');

在上述代码中，withDataFetching 高阶组件负责数据请求逻辑，ComponentA 和 ComponentB 只需要接收 data 属性并展示数据，而不需要关心数据是如何获取的。这样，ComponentA 和 ComponentB 就与 axios 库解耦了，提高了组件的复用性。如果项目后期需要更换数据请求库，只需要在 withDataFetching 高阶组件中进行修改，而不会影响到 ComponentA 和 ComponentB。

3.3 恢复组件功能单一性

高阶组件可以将复杂组件的功能进行拆分，使其恢复功能单一性。以之前提到的 ComplexUserComponent 为例，可以通过多个高阶组件将其功能拆分开来。

// 权限验证高阶组件
function withAuthorization(WrappedComponent) {
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        isAuthorized: false
      };
    }
    componentDidMount() {
      // 模拟权限验证逻辑
      const userRole = 'guest';
      if (userRole === 'admin') {
        this.setState({ isAuthorized: true });
      }
    }
    render() {
      if (!this.state.isAuthorized) {
        return <div>You are not authorized to view this component.</div>;
      }
      return <WrappedComponent {...this.props} />;
    }
  };
}

// 数据请求高阶组件
function withUserFetching(WrappedComponent) {
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        user: null,
        isLoading: false
      };
    }
    componentDidMount() {
      this.setState({ isLoading: true });
      axios.get('/api/user')
      .then(response => {
          this.setState({ user: response.data, isLoading: false });
        })
      .catch(error => {
          console.error('Error fetching user:', error);
          this.setState({ isLoading: false });
        });
    }
    render() {
      if (this.state.isLoading) {
        return <div>Loading user...</div>;
      }
      return <WrappedComponent user={this.state.user} {...this.props} />;
    }
  };
}

// 缓存管理高阶组件
function withUserCache(WrappedComponent) {
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        cache: {}
      };
    }
    componentDidMount() {
      if (this.state.cache['/api/user']) {
        this.props.onCacheHit(this.state.cache['/api/user']);
      } else {
        this.props.onCacheMiss();
      }
    }
    componentDidUpdate(prevProps) {
      if (prevProps.user!== this.props.user) {
        this.state.cache['/api/user'] = this.props.user;
      }
    }
    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
}

// 展示用户信息的组件，功能单一
class UserDisplayComponent extends React.Component {
  render() {
    if (!this.props.user) {
      return null;
    }
    return <div>User: {this.props.user.name}</div>;
  }
}

// 使用多个高阶组件包装 UserDisplayComponent
const EnhancedUserComponent = withAuthorization(withUserCache(withUserFetching(UserDisplayComponent)));

在上述代码中，ComplexUserComponent 的权限验证、数据请求和缓存管理功能被分别封装到了 withAuthorization、withUserFetching 和 withUserCache 三个高阶组件中。UserDisplayComponent 只负责展示用户信息，功能单一且清晰。通过这种方式，组件的逻辑变得更加简洁，易于理解和维护。同时，各个高阶组件可以独立复用，进一步提高了代码的复用性。

4. 高阶组件的使用注意事项

在使用高阶组件进行项目重构时，需要注意一些问题，以确保代码的正确性和稳定性。

4.1 传递静态方法

当使用高阶组件包装一个组件时，原组件的静态方法不会自动传递给新的组件。如果原组件有静态方法，并且在项目中需要使用这些静态方法，就需要手动将静态方法传递给新组件。

function withLogging(WrappedComponent) {
  return class extends React.Component {
    componentDidMount() {
      console.log(`Component ${WrappedComponent.name} has mounted.`);
    }
    componentWillUnmount() {
      console.log(`Component ${WrappedComponent.name} is about to unmount.`);
    }
    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
}

class MyComponent extends React.Component {
  static myStaticMethod() {
    return 'This is a static method';
  }
  render() {
    return <div>My Component</div>;
  }
}

const EnhancedComponent = withLogging(MyComponent);

// 手动传递静态方法
EnhancedComponent.myStaticMethod = MyComponent.myStaticMethod;

在上述代码中，MyComponent 有一个静态方法 myStaticMethod。在使用 withLogging 高阶组件包装 MyComponent 后，需要手动将 myStaticMethod 传递给 EnhancedComponent，否则在调用 EnhancedComponent.myStaticMethod 时会报错。

4.2 避免不必要的渲染

高阶组件可能会导致不必要的渲染，影响性能。例如，当高阶组件返回的新组件的 props 发生变化时，即使这些变化与原组件无关，原组件也可能会重新渲染。为了避免这种情况，可以使用 React.memo 或者在高阶组件内部进行适当的 shouldComponentUpdate 判断。

function withDataFetching(WrappedComponent, url) {
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        data: null,
        isLoading: false
      };
    }
    componentDidMount() {
      this.setState({ isLoading: true });
      axios.get(url)
      .then(response => {
          this.setState({ data: response.data, isLoading: false });
        })
      .catch(error => {
          console.error('Error fetching data:', error);
          this.setState({ isLoading: false });
        });
    }
    // 避免不必要的渲染
    shouldComponentUpdate(nextProps) {
      return nextProps.url!== this.props.url;
    }
    render() {
      if (this.state.isLoading) {
        return <div>Loading...</div>;
      }
      return <WrappedComponent data={this.state.data} {...this.props} />;
    }
  };
}

class MyComponent extends React.Component {
  render() {
    return <div>{this.props.data && `Data: ${this.props.data.value}`}</div>;
  }
}

const DataFetchedComponent = withDataFetching(MyComponent, '/api/data');

在上述代码中，withDataFetching 高阶组件通过 shouldComponentUpdate 方法判断只有当 url 属性发生变化时才重新渲染，避免了因其他无关 props 变化导致的不必要渲染。

4.3 处理 ref

当使用高阶组件包装一个组件并获取其 ref 时，需要注意 ref 的指向。默认情况下，ref 会指向高阶组件返回的新组件，而不是原组件。如果需要获取原组件的 ref，可以使用 React.forwardRef 来转发 ref。

function withLogging(WrappedComponent) {
  return React.forwardRef((props, ref) => {
    return <WrappedComponent ref={ref} {...props} />;
  });
}

class MyComponent extends React.Component {
  myMethod() {
    console.log('This is a method of MyComponent');
  }
  render() {
    return <div>My Component</div>;
  }
}

const EnhancedComponent = withLogging(MyComponent);

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  componentDidMount() {
    this.myRef.current.myMethod();
  }
  render() {
    return <EnhancedComponent ref={this.myRef} />;
  }
}

在上述代码中，通过 React.forwardRef 将 ref 转发给了 MyComponent，使得在 ParentComponent 中可以通过 ref 访问到 MyComponent 的方法。

5. 实际项目中的案例分析

下面通过一个实际项目中的案例来进一步说明 React 高阶组件在项目重构中的作用。

5.1 项目背景

假设我们正在开发一个电商管理系统，其中有多个页面涉及到商品的展示和操作。这些页面包括商品列表页、商品详情页、商品编辑页等。在项目初期，为了快速实现功能，各个页面的组件直接在内部实现了数据获取、权限验证和缓存管理等逻辑。随着项目的发展，代码变得越来越复杂，维护成本不断增加。

5.2 重构前的问题

  1. 代码重复：多个组件都有相似的数据获取逻辑，例如获取商品列表数据、获取商品详情数据等。同时，权限验证逻辑也在多个组件中重复出现，判断用户是否有权限查看或编辑商品。
  2. 耦合度高：组件与特定的数据请求库和权限管理系统紧密耦合，难以在其他项目中复用。例如，商品列表组件直接使用了特定的 API 接口和权限验证函数。
  3. 功能复杂：以商品编辑页组件为例，该组件不仅负责展示和编辑商品信息，还承担了数据获取、权限验证、缓存管理以及与后端交互的功能，使得组件的逻辑非常复杂，难以维护和扩展。

5.3 重构方案

  1. 创建数据请求高阶组件：
function withDataFetching(WrappedComponent, url) {
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        data: null,
        isLoading: false
      };
    }
    componentDidMount() {
      this.setState({ isLoading: true });
      axios.get(url)
      .then(response => {
          this.setState({ data: response.data, isLoading: false });
        })
      .catch(error => {
          console.error('Error fetching data:', error);
          this.setState({ isLoading: false });
        });
    }
    render() {
      if (this.state.isLoading) {
        return <div>Loading...</div>;
      }
      return <WrappedComponent data={this.state.data} {...this.props} />;
    }
  };
}
  1. 创建权限验证高阶组件：
function withAuthorization(WrappedComponent) {
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        isAuthorized: false
      };
    }
    componentDidMount() {
      const userRole = getUserRole();// 假设这个函数用于获取用户角色
      if (userRole === 'admin' || userRole ==='seller') {
        this.setState({ isAuthorized: true });
      }
    }
    render() {
      if (!this.state.isAuthorized) {
        return <div>You are not authorized to perform this action.</div>;
      }
      return <WrappedComponent {...this.props} />;
    }
  };
}
  1. 创建缓存管理高阶组件：
function withCache(WrappedComponent) {
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        cache: {}
      };
    }
    componentDidMount() {
      const cacheKey = this.props.cacheKey;
      if (this.state.cache[cacheKey]) {
        this.props.onCacheHit(this.state.cache[cacheKey]);
      } else {
        this.props.onCacheMiss();
      }
    }
    componentDidUpdate(prevProps) {
      const cacheKey = this.props.cacheKey;
      if (prevProps.data!== this.props.data) {
        this.state.cache[cacheKey] = this.props.data;
      }
    }
    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
}
  1. 重构商品编辑页组件：
class ProductEditComponent extends React.Component {
  render() {
    const { data } = this.props;
    if (!data) {
      return null;
    }
    return (
      <div>
        <h2>Edit Product</h2>
        {/* 商品编辑表单 */}
      </div>
    );
  }
}

const EnhancedProductEditComponent = withAuthorization(withCache(withDataFetching(ProductEditComponent, '/api/products/:id')));

5.4 重构后的效果

  1. 代码重复减少：数据获取、权限验证和缓存管理逻辑被封装到高阶组件中，各个商品相关组件可以复用这些高阶组件，减少了大量的重复代码。
  2. 耦合度降低：商品相关组件不再直接依赖特定的数据请求库和权限管理系统，提高了组件的复用性。如果需要更换数据请求库或权限管理系统，只需要在高阶组件中进行修改，而不会影响到具体的商品组件。
  3. 功能单一性恢复：商品编辑页组件只负责商品编辑的展示和交互逻辑，数据获取、权限验证和缓存管理等功能被分离到高阶组件中，使得组件的逻辑更加清晰，易于维护和扩展。

通过这个实际项目案例可以看出，React 高阶组件在项目重构中能够有效地解决常见问题，提升代码的质量和可维护性。