面试题：React高阶组件组合时的props传递与冲突处理

解决办法一：重命名 prop

实现方式：在高阶组件内部对注入的 prop 进行重命名。例如，在 withDataFetching 高阶组件中，将注入的 data prop 重命名为 fetchedData，在 withUserInfo 中将 user 重命名为 userDetails，在 withPermissions 中将 permissions 重命名为 userPermissions。这样在组合应用时就不会发生冲突。
优点：实现相对简单，不需要引入复杂的第三方库或改变组件的核心逻辑，对原有高阶组件的侵入性较小。
缺点：增加了 prop 名称的长度，可能会使代码可读性略有下降，并且如果在很多地方使用高阶组件，重命名的维护成本会有所增加。

解决办法二：使用对象合并

实现方式：将所有高阶组件注入的 prop 合并到一个对象中。例如，创建一个新的高阶组件 withAllProps，在这个高阶组件内部调用 withDataFetching、withUserInfo 和 withPermissions，然后将它们注入的 prop 合并到一个名为 globalProps 的对象中，再将这个对象传递给被包裹的组件。

const withAllProps = (WrappedComponent) => {
  const WithData = withDataFetching(WrappedComponent);
  const WithUser = withUserInfo(WithData);
  const WithPermissions = withPermissions(WithUser);
  return (props) => {
    const data = props.data;
    const user = props.user;
    const permissions = props.permissions;
    const globalProps = { data, user, permissions };
    return <WithPermissions {...props } globalProps={globalProps} />;
  };
};

优点：可以清晰地管理所有注入的 prop，避免命名冲突，同时对原有高阶组件的修改较小。
缺点：增加了一个额外的高阶组件来进行 prop 合并，使得组件结构变得稍微复杂，并且在被包裹组件中访问 prop 需要通过 globalProps 对象，增加了一层嵌套。

解决办法三：使用 Context

实现方式：利用 React 的 Context 机制，高阶组件将数据注入到 Context 中，被包裹组件通过 Context 来获取数据，而不是通过 prop。这样就避免了 prop 名称冲突的问题。
优点：可以在组件树的较深层次共享数据，而不需要通过层层传递 prop，并且从根本上避免了 prop 命名冲突。
缺点：Context 的使用可能会使数据流向变得不那么直观，不利于代码的维护和调试。同时，如果滥用 Context，可能会导致不必要的重新渲染，影响性能。

星途面试题库

面试题：React高阶组件组合时的props传递与冲突处理

知识考点

面试题答案

解决办法一：重命名 prop

解决办法二：使用对象合并

解决办法三：使用 Context