请阐述在 React 中，利用高阶组件（HOC）模式来封装一个具备 loading 状态展示能力的组件的具体实现思路。
考察说明
考查对 React 高阶组件（HOC）模式的理解及其在实际场景（loading 状态封装）中的应用能力。
回答思路
- 【回答框架 1】HOC 是 React 中用于复用组件逻辑的高级技巧，本质是一个函数，接收一个组件作为参数，返回一个新组件，新组件可以增强原组件的功能。在 loading 场景中，HOC 可以接收一个组件和可选的 loading 配置，返回一个在数据加载期间显示 loading 效果的新组件。
- 【回答框架 2】实现步骤：先定义 HOC 函数，例如 withLoading，它接收一个组件 WrappedComponent 和一个配置对象（如 loadingText、spinner 类型等）。在 HOC 内部定义一个新的函数组件，在该组件中使用 useState 或自定义 hook 来管理 loading 状态，并提供控制 loading 状态的方法（如 startLoading、stopLoading），通过 props 传递给被包装组件，同时渲染 loading 组件或原组件。
- 【回答框架 3】使用方式：const EnhancedComponent = withLoading(MyComponent, { loadingText: '加载中...' }); 在需要时调用 EnhancedComponent 传入相应 props，内部根据 loading 状态决定渲染内容。
- 【回答框架 4】关键点：HOC 应当将不相关的 props 传递给被包装组件，避免属性冲突；尽量保持 HOC 的纯粹性，不修改原组件，而是通过组合实现增强；考虑使用 ref 转发（如果必要）和 displayName 设置以便调试。
- 【回答框架 5】优化：可以使用函数组件与 hooks（如 useEffect）来实现 loading 逻辑，或者在 HOC 中封装数据请求逻辑，在请求开始和结束时自动切换 loading 状态，进一步简化使用。
- 【关键点 1】HOC 是纯函数，接收组件返回新组件，用于逻辑复用。
- 【关键点 2】withLoading 内部通过状态管理 loading 值，并对外提供控制方法。
- 【关键点 3】通过 props 向被包装组件传递加载状态和控制函数，保持原组件接口不变。
- 【关键点 4】注意传递 ref 时使用 React.forwardRef，确保调试时 displayName 清晰。
- 【易错点 1】不要忘记传递与 loading 无关的 props，以免破坏被包装组件的功能。
- 【易错点 2】避免在 HOC 内部创建新的函数组件实例，以免每次渲染都产生新的组件类型导致卸载重挂载。
- 【易错点 3】loading 状态的控制应明确指出由内部管理还是外部控制，避免混乱。