title: 传递原始值到列表项以实现记忆化impact: HIGHimpactDescription: 使 memo() 比较更有效tags: lists, performance, memo, primitives传递原始值到列表项以实现记忆化尽可能只传递原始值字符串、数字、布尔值作为 props 给列表项组件。原始值使memo()的浅比较能够正确工作在值未变化时跳过重渲染。错误方式对象 prop 需要深比较type User { id: string; name: string; email: string; avatar: string } const UserRow memo(function UserRow({ user }: { user: User }) { // memo() 按引用比较 user而非按值 // 如果父级创建了新的 user 对象即使数据相同也会重渲染 return Text{user.name}/Text }) renderItem{({ item }) UserRow user{item} /}这仍然可以优化但正确记忆化更困难。正确方式原始值 props 启用浅比较const UserRow memo(function UserRow({ id, name, email, }: { id: string name: string email: string }) { // memo() 直接比较每个原始值 // 仅在 id、name 或 email 实际变化时重渲染 return Text{name}/Text }) renderItem{({ item }) ( UserRow id{item.id} name{item.name} email{item.email} / )}只传递需要的内容// 错误只需要 name 时传递了整个 item UserRow user{item} / // 正确只传递组件使用的字段 UserRow name{item.name} avatarUrl{item.avatar} /对于回调提升或使用 item ID// 错误内联函数创建新引用 UserRow name{item.name} onPress{() handlePress(item.id)} / // 正确传递 ID在子组件内部处理 UserRow id{item.id} name{item.name} / const UserRow memo(function UserRow({ id, name }: Props) { const handlePress useCallback(() { // 在此处使用 id }, [id]) return Pressable onPress{handlePress}Text{name}/Text/Pressable })原始值 props 使记忆化可预测且有效。注意如果已启用 React Compiler则无需使用memo()或useCallback()但对象引用的问题仍然适用。