请求解析JavaScript双返回函数：React HOC代码示例详解

嘿，我来帮你把这个HOC里的双箭头函数拆得明明白白的，其实它本质是个柯里化函数（返回函数的函数），不是什么神秘的“双返回”，咱们一步一步拆解：

先把箭头函数转成普通函数，瞬间清晰 #

你看到的yell函数用箭头函数写得很紧凑，咱们把它展开成普通函数的写法，就一目了然了：

// 和原箭头函数完全等价的普通函数写法
function yell(PassedComponent) {
  // 第一个函数执行后，返回一个新的函数（这个新函数就是咱们最终要用的增强组件）
  return function(props) {
    // 从传入的props里解构出children，剩下的props用...restProps存起来
    const { children, ...restProps } = props;
    // 返回包装后的原组件，把children转成大写加感叹号，同时传递其他props
    return <PassedComponent {...restProps}>{children.toUpperCase()}!</PassedComponent>;
  };
}

调用流程拆解，看每一步都在干啥 #

咱们跟着代码的执行顺序走一遍：

1. 第一步：生成增强组件

   const AngryTitle = yell(Title)
   

   这里调用了yell的第一个函数，把Title组件传进去。此时yell不会直接渲染内容，而是返回了第二个函数——这个返回的函数就是咱们的AngryTitle组件。

2. 第二步：使用增强组件，渲染内容

   <AngryTitle>Whatever</AngryTitle>
   

   这里相当于调用了yell返回的第二个函数，传入了props（这里的props里children就是字符串"Whatever"）。函数内部把children转成大写加!，再把所有其他props传递给原Title组件，最终渲染出<h1>WHATEVER!</h1>。

为什么要用双箭头（柯里化）写法？ #

这是React HOC的标准套路：

• 第一个箭头函数负责接收要增强的原组件，这样咱们可以用同一个HOC包装不同的组件（比如用yell包装一个按钮组件，得到AngryButton）
• 第二个箭头函数负责接收增强后组件的props，并处理逻辑（比如这里的转大写），最后返回渲染后的JSX

你提到的另一种写法，其实是等价的 #

你说的把第二个箭头函数用大括号包起来加return的写法，只是更显式的写法，和原代码完全等价：

const yell = PassedComponent => ({children, ...props}) => {
  return (
    <PassedComponent {...props}>
      {children.toUpperCase()}!
    </PassedComponent>
  )
}

箭头函数如果只有一行返回值，可以省略大括号和return，原代码就是这种简写形式。

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