[ PROMPT_NODE_25216 ]
js-hoist-regexp
[ SKILL_DOCUMENTATION ]
## 提升正则表达式创建 (Hoist RegExp Creation)
不要在渲染函数内部创建 RegExp。将其提升到模块作用域或使用 `useMemo()` 进行记忆化。
**错误做法(每次渲染都创建新的 RegExp):**
tsx
function Highlighter({ text, query }: Props) {
const regex = new RegExp(`(${query})`, 'gi')
const parts = text.split(regex)
return {parts.map((part, i) => ...)}>
}
**正确做法(记忆化或提升):**
tsx
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` 状态:
typescript
const regex = /foo/g
regex.test('foo') // true, lastIndex = 3
regex.test('foo') // false, lastIndex = 0