react-kanban 源码解析(三)compose、partialRight 等函数式编程技巧实战【免费下载链接】react-kanbanYet another Kanban/Trello board lib for React.项目地址: https://gitcode.com/gh_mirrors/reac/react-kanbanreact-kanban 是一个基于 React Hooks 打造的看板Kanban/Trello组件库。作为 react-kanban 源码解析系列的第三篇本文聚焦其核心工具文件 src/services/utils.js深入剖析 compose、partialRight 等函数式编程技巧看看这些总行数不足 30 行的基础函数是如何撑起卡片拖拽移动、列与卡片的增删改等全部核心逻辑的。为什么看板库需要函数式编程拖拽看板的一切操作本质都是不可变数据下的数组操作卡片在列内拖动 → 数组内元素换位卡片跨列拖动 → 从源数组删除、再插入目标数组新增 / 删除列 → 数组的增与删React 强调不可变数据而函数式编程天然契合这一点不修改原数据、每次返回全新副本让setState变得安全、可预测、可测试。核心武器一compose 函数组合的完整拆解compose 源码逐行讲解源码位于 src/services/utils.jsfunction compose(...fns) { return (arg) fns.reduce((acc, fn) fn(acc), arg) }只有两行却藏着三个关键点接收任意数量的函数返回一个新函数等待数据最后传入用reduce从右到左依次执行——先跑最后一个函数。compose 执行顺序实例const addOne (x) x 1 const double (x) x * 2 const fn compose(addOne, double) fn(3) // 先 double 得 6再 addOne 得 7记住compose读起来像流水线数据从右端进入从左端流出。核心武器二partialRight 右侧偏函数的实战场景partialRight 源码拆解同样来自 src/services/utils.jsfunction partialRight(fn, ...args) { return (...leftArgs) fn(...leftArgs, ...args) }常见的偏函数把参数固定在左侧而partialRight把固定参数放在右侧先传入变化的左侧参数再自动拼接预先准备好的参数。为什么看板场景需要右侧偏函数移动卡片时真正会变的是数组本身而位置参数from、to是固定的const removeAt0 partialRight(removeFromArrayAtPosition, 0) removeAt0([1, 2, 3]) // 移除第 0 位 → [2, 3]这样就把删除函数变成了一个可复用的专用工具。组合拳实战8 行代码实现数组元素换位changeElementOfPositionInArray 源码解析看 src/services/utils.js 的精彩实现function changeElementOfPositionInArray(array, from, to) { const removeFromArrayAtPositionFrom partialRight(removeFromArrayAtPosition, from) const addInArrayAtPositionTo partialRight(addInArrayAtPosition, array[from], to) return compose(removeFromArrayAtPositionFrom, addInArrayAtPositionTo)(array) }拆解成三步用partialRight预填删除位置 from得到删除函数用partialRight预填被移动的元素 目标位置 to得到插入函数用compose串起来先删除、再插入完成元素换位。实际效果演示changeElementOfPositionInArray([0, 1, 2, 3, 4], 1, 2) // → [0, 2, 1, 3, 4]这正是拖拽看板中moveCard、moveColumn的底层依赖相关实现见 src/services/helpers.js。一次拖拽背后就是这套函数式组合拳在高速运转。实战进阶Board 组件中的 partialRight 与 when用 partialRight 消灭重复代码在 src/components/Board/index.js 中同一个handleOnDragEnd被复用了两次const handleOnCardDragEnd partialRight(handleOnDragEnd, { moveCallback: moveCard, notifyCallback: onCardDragEnd, }) const handleOnColumnDragEnd partialRight(handleOnDragEnd, { moveCallback: moveColumn, notifyCallback: onColumnDragEnd, })通过预填不同的moveCallback和notifyCallback分别得到处理卡片拖拽和处理列拖拽两个专用函数逻辑复用、代码清爽。when值满足条件才执行再看 src/services/utils.js 的when配合 identity 默认谓词function when(value, predicate identity) { return function callback(callback) { if (predicate(value)) return callback(value) } }在 Board 中用于只有传入了回调才调用when(notifyCallback)((callback) callback(reorderedBoard, subject, source, destination))可空回调的安全调用一行搞定优雅又防错。更多值得收藏的函数式小技巧replaceElementOfArray柯里化风格的数据替换src/services/utils.js 采用柯里化设计——先传数组再传{ when, for }配置对象。它在 src/services/helpers.js 的changeColumn、changeCard中被反复复用replaceElementOfArray(board.columns)({ when: ({ id }) id column.id, for: (value) ({ ...value, ...newColumn }), })100% 测试覆盖的底气这些工具函数全部配有单元测试见 src/services/utils.spec.js例如partialRight的参数拼接、compose的组合顺序都有明确断言这也是 react-kanban 敢称100% 覆盖的原因。写在最后从 react-kanban 源码收获的 3 个启示小工具函数的威力compose、partialRight各自独立看都很简单组合起来却能用 8 行代码完成复杂的数组换位逻辑组合优于复制Board 组件用partialRight一次定义、多处复用彻底避免重复的拖拽处理函数可测试性即质量纯函数 不可变数据让每个工具都能被独立、确定地测试这正是函数式编程最大的红利。看完这一篇建议你打开 src/services/utils.js 亲手跑一遍测试yarn test函数式编程的妙处只有动手实践才能真正体会。【免费下载链接】react-kanbanYet another Kanban/Trello board lib for React.项目地址: https://gitcode.com/gh_mirrors/reac/react-kanban创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考