mcpField
R
rerender-memo

rerender-memo

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

关于 rerender-memo

这项 React 渲染技能通过将耗时工作提取到记忆化组件中，帮助开发者在提前返回时跳过计算。它也说明启用 React Compiler 后通常无需手动记忆化。

主要功能

  1. 01将耗时工作提取到记忆化组件
  2. 02在计算前执行提前返回
  3. 03考虑 React Compiler 自动优化

适用场景

  1. 01资料加载时跳过头像计算
  2. 02将延后计算安排在独立组件中

安装

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

$npx skills add https://github.com/theorcdev/8bitcn-ui --skill rerender-memo

安装后在 Claude Code 中输入/rerender-memo确认已加载。

详细介绍

提取为记忆化组件

将耗费资源的工作提取到记忆化组件中，以便在计算前提前返回。

错误（即使处于加载状态也会计算头像）：

function Profile({ user, loading }: Props) {
  const avatar = useMemo(() => {
    const id = computeAvatarId(user)
    return <Avatar id={id} />
  }, [user])

  if (loading) return <Skeleton />
  return <div>{avatar}</div>
}

正确（处于加载状态时会跳过计算）：

const UserAvatar = memo(function UserAvatar({ user }: { user: User }) {
  const id = useMemo(() => computeAvatarId(user), [user])
  return <Avatar id={id} />
})

function Profile({ user, loading }: Props) {
  if (loading) return <Skeleton />
  return (
    <div>
      <UserAvatar user={user} />
    </div>
  )
}

**注意：**如果项目启用了 React Compiler，则无需使用 memo() 和 useMemo() 进行手动记忆化。编译器会自动优化重新渲染。

评论

支持 Markdown