简述React 中的⾼阶组件运⽤了什么设计模式 ？
参考回答
React 中的高阶组件（HOC，Higher-Order Component）运用了 装饰者模式（Decorator Pattern）。高阶组件是一个函数，它接收一个组件并返回一个新的增强版组件。这个新组件通常会为原始组件添加额外的功能或修改其行为，类似于装饰者模式通过装饰对象来增强其功能。
例如：
const withLoading = (WrappedComponent) => {
return (props) => {
if (props.isLoading) {
return <div>Loading...</div>;
}
return <WrappedComponent {...props} />;
};
};
const MyComponent = ({ name }) => <div>Hello, {name}!</div>;
const MyComponentWithLoading = withLoading(MyComponent);
// 使用高阶组件
<MyComponentWithLoading isLoading={true} />;
在这个例子中，withLoading 就是一个高阶组件，它通过包装 MyComponent 来为它添加显示加载状态的功能。
详细讲解与拓展
- 装饰者模式（Decorator Pattern）：
- 装饰者模式是一种结构型设计模式，它允许动态地给一个对象添加额外的功能，而不改变其结构。在 React 中，高阶组件通过包装原始组件并添加新的功能或行为，实际上是在应用装饰者模式。
- 高阶组件通过组合的方式增强组件，而不直接修改原组件的代码。
- 高阶组件的定义和功能：
- 高阶组件 是一个函数，它接收一个组件作为参数，返回一个增强版的组件。增强版组件通常会为原组件添加额外的逻辑或功能（比如条件渲染、注入新的 props、增强生命周期行为等）。
- 这使得我们可以在不同组件之间复用逻辑，而不需要重复代码。
示例：
const withAuthorization = (WrappedComponent) => { return (props) => { if (!props.isAuthorized) { return <div>You are not authorized to view this content.</div>; } return <WrappedComponent {...props} />; }; }; const MyComponent = () => <div>Protected Content</div>; const MyComponentWithAuthorization = withAuthorization(MyComponent); <MyComponentWithAuthorization isAuthorized={false} />; - 高阶组件的特点：
- 函数式：高阶组件是一个函数，接收一个组件并返回另一个增强版组件。
- 不修改原组件：高阶组件不会修改传入的原组件，而是通过组合来增强原组件的功能。
- 复用逻辑：高阶组件是复用组件逻辑的一个有效方式。例如，可以用高阶组件处理授权、数据加载、错误处理等。
- 与其他设计模式的对比：
- 组合模式（Composition Pattern）：虽然高阶组件有时也被认为与组合模式相似，但高阶组件是通过封装的方式增强组件，而组合模式更注重组件之间的嵌套和层次结构。
- 代理模式（Proxy Pattern）：高阶组件与代理模式有相似之处，都是通过在原始对象（组件）周围添加一层包装来控制行为。不过，代理模式通常用于方法的拦截，而高阶组件侧重于增强组件的功能。
- 使用高阶组件的注意事项：
- 命名：为了区分高阶组件和普通组件，通常会给高阶组件命名时加上
with前缀（例如withLoading、withAuthorization）。 - 静态方法和 ref：高阶组件会创建一个新的组件，因此原始组件的静态方法和 ref 可能不会被传递给增强后的组件。可以使用
hoist-non-react-statics库来保留静态方法。
- 命名：为了区分高阶组件和普通组件，通常会给高阶组件命名时加上
总结来说，React 中的高阶组件采用了装饰者模式，通过将功能增强逻辑封装成一个函数，并传递给组件，动态地扩展组件的功能，而不直接修改原有的组件。这使得高阶组件在复用组件逻辑方面非常有效。