React JavaScript高阶组件双箭头函数作用及示例解析

别担心，我一步步帮你拆解这个代码，搞清楚每个部分的作用：

先明确高阶组件（HOC）的核心逻辑 #

根据React定义，HOC是接收一个组件，返回一个新组件的函数。你看到的双箭头写法，其实是把这个逻辑拆成了两步，本质是柯里化函数的简写。

拆解双箭头函数的每一部分 #

我们把代码展开成普通函数写法，你就能一眼看懂：

const reverse = function(PassedComponent) {
  // 第一步：接收要包裹的目标组件（比如你的name组件）
  return function(props) {
    // 第二步：返回一个全新的React组件函数，这个函数接收的就是你使用<reversedName>时传入的所有props
    const { children, ...restProps } = props;
    return <PassedComponent {...restProps}> {children.split("").reverse().join("")} </PassedComponent>;
  };
};

第二个箭头的参数到底是什么？ #

第二个箭头({ children, ...props }) => ...里的参数，就是新组件接收到的所有props对象：

• React组件的props是一个包含所有传入属性的对象，其中children是React的特殊props（就是你写在组件标签之间的内容，比如<reversedName>Hello</reversedName>里的Hello）。
• { children, ...props }是ES6的对象解构语法：把children从props对象里单独提取出来，剩下的其他属性（比如如果你传了className="test"）会被收集到props这个对象里。

结合你的完整代码看执行流程 #

1. const reversedName = reverse(name)：调用reverse并传入name组件，此时reverse返回的是第二个箭头定义的新组件函数，reversedName就是这个新组件。
2. 当渲染<reversedName>Hello</reversedName>时：
   • React会调用这个新组件函数，传入的props是{ children: "Hello" }。
   • 解构后children等于"Hello"，props是空对象（因为没有传其他属性）。
   • 新组件内部把children反转成"olleH"，然后把props透传给name组件，同时把反转后的字符串作为name的children。
   • 最终name组件渲染出<span>olleH</span>，页面显示olleH。

为什么要这么写？ #

这种双箭头的写法既符合HOC的定义（接收组件返回新组件），又能让新组件正常接收外部传入的props——你可以给<reversedName>传任何props，比如<reversedName className="text-red">Hello</reversedName>，此时className会被收集到props里，通过{...props}透传给name组件，让name变成<span class="text-red">olleH</span>。

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