React 高阶组件 (HOC) 教程

React 高阶组件 (HOC) 是一个重要的概念，它允许你将组件的某些功能提取出来，形成可重用的模块。本教程将介绍如何使用 React HOC，以及它们在 Web 开发中的应用。

什么是 HOC？

HOC 是一个接受组件作为参数并返回一个新的组件的函数。这个新的组件继承了原始组件的大部分特性，同时可以添加额外的功能。

例子

以下是一个简单的 HOC 示例：

function withSubscription(WrappedComponent, selectData) {
  // 选择数据
  function injectData(props) {
    const data = selectData(props);
    return { ...props, data };
  }

  // 返回一个新的组件
  return function WithSubscription(props) {
    return <WrappedComponent {...injectData(props)} />;
  };
}

在这个例子中，withSubscription 函数接受一个组件和一个选择数据的函数，然后返回一个新的组件，这个新组件将数据注入到原始组件中。

HOC 的应用

1. 增加日志功能

function withLog(WrappedComponent) {
  return function WithLog(props) {
    console.log(`Rendering with props: ${JSON.stringify(props)}`);
    return <WrappedComponent {...props} />;
  };
}

2. 添加路由

import { Route } from 'react-router-dom';

function withRoute(WrappedComponent) {
  return function WithRoute(props) {
    return <Route path="/path" component={WrappedComponent} />;
  };
}

3. 状态管理

import { connect } from 'react-redux';

function withRedux(WrappedComponent) {
  return connect(
    state => ({ ...state }),
    dispatch => ({ ...dispatch })
  )(WrappedComponent);
}

扩展阅读

想要了解更多关于 React HOC 的内容，可以阅读以下教程：

• React 官方文档 - 高阶组件

图片

React 高阶组件

React HOC 代码示例

React HOC 应用实例