面试题：React中高阶组件与Render Props在数据传递上的区别

Question

请阐述在React中，高阶组件和Render Props在向子组件传递数据方面各自的特点与实现方式，并举例说明。

Answer 1

高阶组件（Higher - Order Components，HOC）

• 特点：
  • 复用逻辑：HOC 允许将组件逻辑复用，通过包裹目标组件，为其添加额外的功能或数据。
  • 不改变原始组件代码：以非侵入式的方式增强组件，不直接修改目标组件内部实现。
  • 可嵌套：多个 HOC 可以嵌套使用，层层增强组件功能。
• 实现方式：HOC 是一个函数，接收一个组件作为参数，并返回一个新的组件。

import React from'react';

// 高阶组件
const withData = (WrappedComponent) => {
    return (props) => {
        const data = { message: '来自高阶组件的数据' };
        return <WrappedComponent {...props} data={data} />;
    };
};

// 被包裹的组件
const MyComponent = ({ data }) => {
    return <div>{data.message}</div>;
};

// 使用高阶组件
const EnhancedComponent = withData(MyComponent);

const App = () => {
    return (
        <div>
            <EnhancedComponent />
        </div>
    );
};

export default App;

Render Props

• 特点：
  • 灵活性高：通过一个函数 prop（通常命名为 render 或其他自定义名称）传递渲染逻辑，使得组件之间的代码复用更加灵活。
  • 数据传递直观：在 render 函数参数中直接传递数据，使用起来直观明了。
• 实现方式：包含 render prop 的组件，在其 render 方法中调用 render prop 函数，并传递需要的数据。

import React from'react';

// 提供数据的组件
const DataProvider = ({ render }) => {
    const data = { message: '来自 Render Props 的数据' };
    return render(data);
};

// 使用 Render Props 的组件
const MyComponent = () => {
    return (
        <DataProvider render={(data) => (
            <div>{data.message}</div>
        )} />
    );
};

const App = () => {
    return (
        <div>
            <MyComponent />
        </div>
    );
};

export default App;