30、React 组件组合：高阶组件、渲染属性与上下文的运用

React 组件组合：高阶组件、渲染属性与上下文的运用

1. 高阶组件（Higher-Order Components）

1.1 高阶组件概述

高阶组件（HOCs）是一种替代专用组件的有效方式，当多个组件需要共享通用代码，但不一定渲染相关内容时，HOCs 就非常有用。HOCs 常用于处理横切关注点，像授权、日志记录和数据检索等任务，这些任务贯穿整个应用程序，若不使用 HOCs，相同的功能可能会在多个地方重复实现。

1.2 创建高阶组件示例

下面是一个名为 ProFeature 的高阶组件示例，它定义在 ProFeature.js 文件中：

import React from "react";
export function ProFeature(FeatureComponent) {
    return function(props) {
        if (props.pro) {
            let { pro, ...childProps}  = props;
            return <FeatureComponent {...childProps} />
        } else {
            return (
                <h5 className="bg-warning text-white text-center">
                    This is a Pro Feature