JavaScript函数中双箭头语法的含义：是否用于props二次解构？

先看修正语法错误后的代码：

import React from 'react';

const createDataList =
  ({
    dataOptions = {},
    settings,
    style,
    width,
  }) =>
  ({
    HeaderComponent,
    dataRows = [],
    states = [],
    dataFilterRows = [],
    onItemSelect,
    mappedEvents = {},
    onRefresh,
    onDateSelect,
    onEndReached,
    onScroll,
    refreshing,
    loading,
    endReached,
  }) => {
    // functionality implementation
  };
export default createDataList;

一、嵌套箭头函数的本质：柯里化函数 #

这是JavaScript里**柯里化（Currying）**的写法——把原本需要一次性传入的多组参数，拆分成多步传入：

• 调用createDataList时先传入第一组参数，它会返回一个新函数；
• 再调用这个新函数传入第二组参数，才会触发内部的核心逻辑执行。

二、两层箭头函数的作用与解构说明 #

外层箭头函数

• 它的{dataOptions = {}, settings, style, width}是对传入的第一个参数对象做解构赋值，同时给dataOptions设置了空对象的默认值。
• 这一步通常用来传递通用/静态配置，比如基础功能设置、固定样式、容器宽度这类不常变动的参数，提前固化这些配置后，返回的内层函数可以直接复用，不用每次调用都重复传入。

内层箭头函数

• 它的{HeaderComponent, dataRows = [], ...}同样是解构赋值，但它解构的是调用内层函数时传入的全新参数对象，和外层的参数是完全独立的两组数据，不是对外层props的进一步解构。
• 这里传递的是动态业务数据/回调/组件依赖，比如列表数据行、选中事件回调、刷新状态这类随业务场景变化的内容。

三、实际调用示例 #

这种写法的优势是能复用通用配置，比如：

// 第一步：传入通用配置，得到专属的用户列表生成函数
const UserDataList = createDataList({
  settings: { showCheckbox: true },
  width: '100%',
  style: { border: '1px solid #eee' }
});

// 第二步：传入不同动态数据，生成不同场景的列表逻辑
// 场景1：普通用户列表
UserDataList({
  dataRows: normalUserList,
  onItemSelect: (item) => console.log('选中普通用户', item),
  refreshing: false
});

// 场景2：管理员列表
UserDataList({
  dataRows: adminUserList,
  onItemSelect: (item) => console.log('选中管理员', item),
  refreshing: true
});

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