HOC

same::

高阶组件

• father::组件

React中的高阶组件

使用范围

• 将某一个通用的逻辑附加到任意传入的组件中，使传入的组件增强某一项功能

梗概

• 使用[use::装饰器模式]来实现

示例

下面是一个简单示例展示了如何使用高阶组件来增强一个React组件：

import React from 'react';
 
// 定义一个简单的高阶组件
const withLoading = (WrappedComponent) => {
  return class WithLoading extends React.Component {
    render() {
      if (this.props.isLoading) {
        return <div>Loading...</div>;
      }
      return <WrappedComponent {...this.props} />;
    }
  };
};
 
// 定义一个普通React组件
const MyComponent = ({ name }) => <div>Hello, {name}!</div>;
 
// 使用高阶组价增强MyComponent
const MyEnhancedComponent = withLoading(MyComponent);
 
// 在应用中渲染被增强过的MyComponent
const App = () => (
  <MyEnhancedComponent name="Alice" isLoading={true} />
);
 
export default App;

指向原始笔记的链接