获得徽章 0
- 因为sortablejs的一些问题（它操作dom，导致react的虚拟dom和实际dom出现“不一致”的问题），调研了一圈dnd相关的库，react-dnd（移动端有问题）、react-beautiful-dnd（atlassian不再维护开源版本，只维护内部版本了，可能是为了给竞品不再提供解决方案），还有一些其他的，也都不怎么维护了。
最后选定了dnd-kit，它的作者之前还开发过一个react-sortable-hoc，dnd-kit是他重新思考了dnd之后，开源的插件化的dnd库。
我做的应用比较复杂，严重依赖拖拽相关的功能库，研究一番dnd-kit之后，发现它的架构确实很不错，基本上只要你了解了它的功能和架构，所有拖拽相关的功能它都可以实现（吐槽一下它的文档和示例，写的太敷衍了，也没法直接拿来用）。
比如官方给的tree的例子是基于flat(tree)这个trick实现的，事实上，在很多场景中，这不是一个好的解决方案，尽管这样可以自带sortable的拖拽动画，反复折腾（实验）了好几天，终于基于他的onDragEnd实现了保留原数据结构下，tree item的拖拽，它其实有一个“feature”（bug），就是DndContext如果你的items引用没变的情况下，Context内部的数据是不会发生变化的，尽管渲染的数据发生变化了，而它内部数据没有发生变化（具体反映出来就是active或者over的sortable对象里面的原始数据一直不变），这就导致sortableConext提供的排序动画会出问题，最终其实很简单，一个deepClone函数搞定：展开评论点赞 - #你的工作会被ChatGPT取代吗#
几行代码让你的ChatGPT keepalive：(function () {
'use strict';
setInterval(function () {
// input a question into the chat box
const textarea = document.querySelector("textarea");
textarea.value =Math.random()>=0.5? "继续":Math.random()+"这个数有什么历史典故";
textarea.dispatchEvent(new KeyboardEvent("keydown", {
bubbles: true,
cancelable: true,
key: "Enter",
code: "Enter",
keyCode: 13
}));
}, 60000+Math.random()*10000);
})();展开等人赞过
评论4 - JS是给我们用的，不是用来搞八股文的，不到20行代码搞定React恶心人的“嵌套地狱”，拿走不谢，效果：
export default new Handle(Index)
.by(observer)
.by(memo)
.get()
class Handle<T> {
private el: (props: T) => JSX.Element | null
constructor(el: (props: T) => JSX.Element | null) {
this.el = el
}
public by(fn: Function) {
this.el = fn.call(this, this.el)
return this
}
get() {
return this.el
}
}展开赞过 评论1
juejin.cn![[流泪]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_6.dde0d83.png)
，审核小哥看看什么内容不适合发布吧。