mcpField
J
js-tosorted-immutable

js-tosorted-immutable

github.com/theorcdev开发2.1k35 次安装2 天前更新
代码仓库

关于 js-tosorted-immutable

面向 React 开发者的编码技能，介绍使用 `toSorted()` 等不可变数组操作，避免修改 props 或 state。内容还列出反转、拼接和替换元素的不可变方法。

主要功能

  1. 01以不可变方式排序数组
  2. 02使用不可变反转、拼接和替换方法
  3. 03避免修改 React props 和 state
  4. 04在旧环境中使用展开复制作为回退

适用场景

  1. 01对 React props 派生的列表排序
  2. 02避免修改 React state 中的数组
  3. 03兼容不支持 `toSorted()` 的环境

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/theorcdev/8bitcn-ui --skill js-tosorted-immutable

安装后在 Claude Code 中输入/js-tosorted-immutable确认已加载。

详细介绍

为确保不可变性，使用 toSorted() 代替 sort()

.sort() 会就地修改数组，这可能会导致 React 出现错误。使用 .toSorted() 可创建新的排序数组，而不会修改 state 和 props。

错误（会修改原数组）：

function UserList({ users }: { users: User[] }) {
  // Mutates the users prop array!
  const sorted = useMemo(
    () => users.sort((a, b) => a.name.localeCompare(b.name)),
    [users]
  )
  return <div>{sorted.map(renderUser)}</div>
}

正确（会创建新数组）：

function UserList({ users }: { users: User[] }) {
  // Creates new sorted array, original unchanged
  const sorted = useMemo(
    () => users.toSorted((a, b) => a.name.localeCompare(b.name)),
    [users]
  )
  return <div>{sorted.map(renderUser)}</div>
}

这在 React 中很重要的原因：

  1. 修改 props/state 会破坏 React 的不可变性模型——React 要求将 props 和 state 视为只读
  2. 会导致闭包过时的错误——在闭包（回调、effect）中修改数组可能会导致意外行为

浏览器支持（旧版浏览器的回退方案）：

.toSorted() 在所有现代浏览器中均可使用（Chrome 110+、Safari 16+、Firefox 115+、Node.js 20+）。对于较旧的环境，请使用展开运算符：

// Fallback for older browsers
const sorted = [...items].sort((a, b) => a.value - b.value)

其他不可变数组方法：

  • .toSorted() - 不可变排序
  • .toReversed() - 不可变反转
  • .toSpliced() - 不可变 splice
  • .with() - 不可变元素替换

评论

支持 Markdown