面试题：React高阶组件在项目重构中如何提升代码复用性

提升代码复用性的方式

逻辑抽取：将通用的逻辑，如数据获取、权限验证等，从具体组件中抽离出来，放到高阶组件中。这样不同的组件需要相同逻辑时，只需通过高阶组件包裹，而无需在每个组件内重复编写。
属性增强：高阶组件可以在不改变原组件内部逻辑的情况下，为其添加新的属性。比如为需要权限控制的组件添加权限相关属性，用于判断和展示不同内容。
生命周期劫持：高阶组件能够访问和控制被包裹组件的生命周期。例如在组件挂载前进行一些数据预处理，或者在组件卸载时清理资源，多个组件复用这种处理逻辑。

示例代码

import React, { Component } from'react';

// 高阶组件
const withDataFetching = (WrappedComponent, dataUrl) => {
    return class extends Component {
        constructor(props) {
            super(props);
            this.state = {
                data: null,
                isLoading: false
            };
        }

        componentDidMount() {
            this.setState({ isLoading: true });
            fetch(dataUrl)
              .then(response => response.json())
              .then(data => this.setState({ data, isLoading: false }));
        }

        render() {
            return <WrappedComponent data={this.state.data} isLoading={this.state.isLoading} {...this.props} />;
        }
    };
};

// 被包裹的组件
class MyComponent extends Component {
    render() {
        const { data, isLoading } = this.props;
        if (isLoading) {
            return <div>Loading...</div>;
        }
        return (
            <div>
                {data && <pre>{JSON.stringify(data, null, 2)}</pre>}
            </div>
        );
    }
}

// 使用高阶组件
const EnhancedComponent = withDataFetching(MyComponent, 'https://example.com/api/data');

// 在应用中使用增强后的组件
class App extends Component {
    render() {
        return (
            <div>
                <EnhancedComponent />
            </div>
        );
    }
}

export default App;

在上述示例中，withDataFetching 高阶组件负责数据获取的逻辑，包括发起请求、处理加载状态等。MyComponent 组件只专注于数据的展示。多个需要数据获取的组件都可以通过 withDataFetching 高阶组件进行包裹，复用数据获取逻辑，提升了代码复用性。

星途面试题库

面试题：React高阶组件在项目重构中如何提升代码复用性

知识考点

面试题答案

提升代码复用性的方式

示例代码