React Native渲染箭头函数最佳实践 含FlatList传参场景疑问

1. 两种写法的对比（情况1 vs 情况2） #

两种写法功能完全等价，但性能表现和合规性完全不同：

• 情况1完全符合性能优化最佳实践：
  定义在组件外部的renderItem是固定引用的常量，不会随IndexScreen的重渲染发生变化，FlatList不会因为该prop的变更触发不必要的整体重渲染。
• 情况2不符合性能优化最佳实践：
  每次IndexScreen重渲染时，都会生成一个新的匿名箭头函数传递给renderItem，prop引用的变化会触发FlatList的不必要重渲染，列表项数量较多时会产生明显的性能损耗。

2. 需要传递额外参数的场景解决方案 #

你提到的需要传入context变量等额外参数的场景，不需要硬写匿名函数，有两种符合最佳实践的实现方案：

方案1：用useCallback缓存回调函数 #

将renderItem定义在组件内部，用useCallback包裹，仅在依赖的额外参数变化时才更新函数引用，保证大多数场景下函数引用稳定：

import { useCallback, useContext } from 'react'
import { FlatList } from 'react-native'

const IndexScreen = () => {
  const otherData = useContext(YourContext)
  // 仅otherData变化时才会生成新的renderItem引用
  const renderItem = useCallback(({ item: data }) => {
    return <Item data={data} otherData={otherData} />
  }, [otherData])

  return (
    <FlatList
      // 其他配置
      renderItem={renderItem}
    />
  )
}

export default IndexScreen

方案2：子组件内部消费context（性能更优） #

如果额外参数来自context，可以直接让列表项Item组件自己消费对应的context，不需要父层传递参数，renderItem可以直接提取到组件外部，彻底避免引用变化问题：

// Item组件内部自行消费context
const Item = ({ data }) => {
  const otherData = useContext(YourContext)
  // 组件逻辑
}

// 父组件直接使用外部定义的renderItem
const renderItem = ({ item: data }) => <Item data={data} />
const IndexScreen = () => {
  return (
    <FlatList
      // 其他配置
      renderItem={renderItem}
    />
  )
}

核心原理补充 #

业界不推荐在渲染函数中直接写箭头函数作为回调，本质不是箭头函数本身有性能问题，而是每次渲染生成的新函数引用会作为props触发子组件的不必要重渲染。只要能保证函数引用稳定，不管是定义在组件外部还是用useCallback缓存的内部函数，都符合最佳实践。

内容的提问来源于stack exchange，提问作者Gaylord.P