React高阶组件（HOC）中两个return语句的作用是什么？

直接给你拆解这两个return的不同作用：

• 外层的return NewComp：这是高阶组件本身的返回值。HOC本质就是个函数，它接收原始组件作为参数，最后要返回一个全新的组件函数（也就是你定义的NewComp）。当你用这个HOC去包装原始组件时，得到的就是这个NewComp，之后你可以像用普通React组件一样使用它。
• 内层的return <OriginalComp money={money} handleIncrease={handleIncrease} />：这是NewComp组件的返回值。当NewComp被React渲染的时候，它会执行到这里，返回原始组件的JSX实例，同时把HOC里封装好的状态和方法作为props传递给原始组件。

举个实际的代码例子帮你理解：

// 你的HOC
function withMoney(OriginalComp) {
  // 定义新组件NewComp
  function NewComp() {
    const [money, setMoney] = useState(100);
    const handleIncrease = () => setMoney(money + 10);
    // NewComp渲染时返回的内容
    return <OriginalComp money={money} handleIncrease={handleIncrease} />;
  }
  // HOC返回新组件NewComp
  return NewComp;
}

// 使用HOC包装原始组件
const EnhancedComponent = withMoney(MyOriginalComponent);

// 之后渲染EnhancedComponent，其实就是渲染NewComp
// 这时候NewComp会执行内部逻辑，返回带props的OriginalComp

简单总结：外层return是把HOC加工好的新组件抛出去，内层return是这个新组件在实际渲染时产出的内容。

内容的提问来源于stack exchange，提问作者Krishna Bharadwaj