beizhu
type
Post
status
Published
date
Jul 22, 2020
slug
summary
React + antd-table 表格拖拽class类写法，顺便看到了Immutability Helpers，觉得还不错，简单的看了看
tags
React
category
技术总结
icon
password
React + Antd-table 表格拖拽class类写法(Immutability Helpers介绍)
第一种方案：react-dnt
主组件
组件
css
第二种方案：react-sortable-hoc
未做组件抽离，凑合看
该方案在使用后有点卡顿，时间急没找到 卡顿的原因。使用了第一种方案
可能是跟表格中的动态编辑的select、input有关，setState导致tbody重新渲染，造成卡顿，select和input也有许多联动，目前猜是这个原因，后期有时间，找到一下这个原因。
immutability-helper
yarn add immutability-helper
上文中update $splice
在不更改原始源的情况下改变数据副本。
Immutable data encourages pure functions (data-in, data-out) and lends itself to much simpler application development and enabling techniques from functional programming such as lazy evaluation.
API
$push —— 数组;$unshift —— 数组;$splice —— 数组;$set —— 替换/覆盖/合并原数据;$toggle —— array of strings ，toggles a list of boolean fields from the target object；$unset —— remove the list of keys in array from the target object;$merge —— 合并对象;$apply —— passes in the current value to the function and updates it with the new returned value；$add —— 新增;$remove —— 删除。参考