避免高阶组件中箭头函数导致子组件重复渲染，关键在于用usecallback缓存函数引用、不在hoc内部动态创建箭头函数、被包裹组件需配合react.memo或purecomponent，并用usememo缓存透传的props对象。

避免高阶组件中箭头函数导致子组件重复渲染，核心在于**切断每次渲染都生成新函数引用的链路**。箭头函数在渲染时重新创建，会改变 props 中的函数引用，触发 React.memo 失效或 shouldComponentUpdate 判定为“变化”，从而让本不该更新的子组件重绘。

用 useCallback 缓存事件处理函数

把原本写在 JSX 里或 render 中的箭头函数，提前用 useCallback 包裹并指定稳定依赖项：

• 不推荐（每次渲染都新建函数）：onChangeText={(text) => handleChange(text)}
• 推荐（仅依赖项变更时才重建）：const handleChangeMemo = useCallback(handleChange, [/* 依赖项 */]);，然后传 onChangeText={handleChangeMemo}
• 若 handleChange 本身是普通函数且无内部依赖，依赖数组可为空：useCallback(handleChange, [])

避免在 HOC 内部直接定义箭头函数作为 props

高阶组件返回的新组件中，不要在 render 或函数组件主体里现场写 () => {...} 传给被包裹组件：

宝塔Linux面板11.3.0

宝塔面板11.3.0是一款针对Linux服务器设计的可视化管理工具，通过重构核心模块实现资源占用显著降低，尤其适合低配置服务器环境。它将复杂的命令行操作转化为直观的图形界面，帮助开发者快速完成网站部署、环境配置及日常运维工作，无需专业技术背景即可高效管理服务器。

下载

• 错误示例：<wrappedcomponent onaction="{()"> doSomething()} /></wrappedcomponent>
• 正确做法：把逻辑提前封装好，通过 useCallback 或类组件的实例方法提供稳定引用
• 若 HOC 需注入行为，应将函数作为参数传入，而非在 HOC 内部动态生成

确保被包裹组件启用浅比较优化

即使父级（HOC）传入了稳定函数，子组件仍需配合才能跳过无效渲染：

• 函数组件请用 React.memo 包裹，如 const MyInput = React.memo(...)
• 类组件继承 PureComponent，或手动实现 shouldComponentUpdate
• 注意：React.memo 默认只做浅比较；若 props 中有对象或嵌套函数，需自定义比较函数

谨慎使用内联对象和函数组合 HOC

有些 HOC 会把增强逻辑包装成新 props 直接透传，例如：{...enhancedProps}。如果 enhancedProps 包含未缓存的函数或对象，问题依旧存在：

• 用 useMemo 缓存整个 props 对象：const enhancedProps = useMemo(() => ({ onClick: handleClick }), [handleClick])
• 避免在 HOC 返回的组件中解构再重组 props，防止无意中创建新引用
• 优先让 HOC 接收已 memoized 的函数，而不是自己构造