关键词：React HOC

React 中的 HOC（高阶组件，Higher-Order Components）是一种基于 React 的组合特性而形成的设计模式，用于重用组件逻辑。一个高阶组件是一个函数，它接受一个组件并返回一个新组件。

HOC 允许你为组件添加额外的功能而无需更改组件自身的实现。这种模式可以帮助你在 React 应用程序中保持 DRY（不重复你自己），并且可以提升组件的可测试性和可维护性。

HOC 的使用场景包括：

1. 代码复用、逻辑和引导抽象： 可以将共享逻辑提取到 HOC 中，让不同的组件能够重用这段逻辑。
2. 渲染劫持： 在 HOC 中可以修改传入组件的 JSX 结构。
3. 状态抽象和操作： 可以将内部状态和相关方法从组件中抽离出来。
4. Props 代理： 通过 HOC 可以添加、编辑或删除传入组件的 props。

HOC 的定义方式：

function withSubscription(WrappedComponent, selectData) {
  // 返回一个 class 组件
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.handleChange = this.handleChange.bind(this);
      this.state = {
        data: selectData(DataSource, props)
      };
    }

    componentDidMount() {
      // ...负责订阅相关的操作...
    }

    componentWillUnmount() {
      // ...取消订阅...
    }

    handleChange() {
      this.setState({
        data: selectData(DataSource, this.props)
      });
    }

    render() {
      // ... 并使用新数据渲染被包装的组件!
      // 请注意，我们可能还会传递其他属性
      return <WrappedComponent data={this.state.data} {...this.props} />;
    }
  };
}

在这个例子中，withSubscription 是一个 HOC。它接受一个组件 WrappedComponent 和一个函数 selectData 作为参数，这个函数用于从数据源中选择需要的数据。返回一个新的组件，这个新组件通过 state 管理数据，并在挂载后订阅数据源，在卸载前取消订阅，并且在数据改变时通过 setState 更新数据。

注意事项：

• HOC 不应该修改传入的组件，而是使用组合的方式将其包裹起来。
• 传递不相关的 props 至被包裹的组件，可能会导致属性冲突。
• HOC 应该传递不与高阶组件相关的 props 至被包裹的组件，这有助于保持组件的纯净和可复用性。
• 对于 HOC，通常需要注意不要在 render 方法中创建 HOC，因为这会导致组件的不必要的重新挂载。

总而言之，HOC 是 React 中一个非常有用的模式，允许开发者以声明方式抽象组件逻辑，提高组件复用。