mcpField
J
js-hoist-regexp

js-hoist-regexp

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

关于 js-hoist-regexp

这项 JavaScript 和 React 渲染技能建议将正则表达式创建移出 render，或使用记忆化处理。它还说明全局正则表达式的可变状态及其影响。

主要功能

  1. 01将 RegExp 创建移出 render
  2. 02记忆化依赖查询的表达式
  3. 03留意全局正则的 lastIndex 状态

适用场景

  1. 01避免每次渲染都重新创建正则
  2. 02防止测试全局正则时出现意外行为

安装

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

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

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

详细介绍

将 RegExp 创建移至高层作用域

不要在 render 中创建 RegExp。应将其移至模块作用域，或使用 useMemo() 进行记忆化。

不正确（每次 render 都会创建新的 RegExp）：

function Highlighter({ text, query }: Props) {
  const regex = new RegExp(`(${query})`, 'gi')
  const parts = text.split(regex)
  return <>{parts.map((part, i) => ...)}</>
}

正确（进行记忆化或移至高层作用域）：

const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/

function Highlighter({ text, query }: Props) {
  const regex = useMemo(
    () => new RegExp(`(${escapeRegex(query)})`, 'gi'),
    [query]
  )
  const parts = text.split(regex)
  return <>{parts.map((part, i) => ...)}</>
}

警告（全局正则表达式具有可变状态）：

全局正则表达式（/g）具有可变的 lastIndex 状态：

const regex = /foo/g
regex.test('foo')  // true, lastIndex = 3
regex.test('foo')  // false, lastIndex = 0

评论

支持 Markdown