React Native中如何对需传参的onPress内联函数进行memoize记忆化处理

大多数常规场景下，内联函数创建新实例的性能损耗极小，可以忽略不计。只有当你将这个函数作为prop传给使用React.memo/PureComponent封装的纯子组件，每次传入新的函数引用会触发子组件不必要重渲染时，才需要做记忆化优化，不建议提前做过度优化。

函数组件实现方案 #

1. 固定参数场景：用useCallback直接包裹 #

将你的内联逻辑用useCallback包裹，只要依赖项没有变化，函数引用就不会更新：

import { useCallback } from 'react'

// 组件内部
const handlePress = useCallback(() => {
  makeData('hello')
}, [makeData])

// 绑定事件
onPress={handlePress}

注意：必须完整填写useCallback的依赖数组，可借助eslint-plugin-react-hooks的exhaustive-deps规则校验，避免出现闭包陷阱。

2. 动态参数场景（比如列表遍历生成的按钮） #

两种可选方案：

• 方案一：将参数和无参数的处理函数一起传给子组件，子组件内部自行拼接调用

// 父组件
const handleMakeData = useCallback((id) => {
  makeData(id)
}, [makeData])

// 渲染列表项时
<ListItem key={item.id} itemId={item.id} onPress={handleMakeData} />

// 子组件内部（用React.memo包裹）
const ListItem = React.memo(({ itemId, onPress }) => {
  const handleItemPress = useCallback(() => {
    onPress(itemId)
  }, [onPress, itemId])
  return <Button onPress={handleItemPress} />
})

• 方案二：通过元素自定义属性传参，处理函数从事件对象中取参数

const handlePress = useCallback((e) => {
  const param = e.currentTarget.dataset.param
  makeData(param)
}, [makeData])

// 绑定事件时挂载参数
<Button data-param="hello" onPress={handlePress} />

类组件实现方案 #

1. 构造函数内提前绑定参数 #

class MyComponent extends React.Component {
  constructor(props) {
    super(props)
    // 构造函数内只绑定一次，引用不会变化
    this.handlePress = this.makeData.bind(this, 'hello')
  }

  makeData(param) {
    // 你的逻辑
  }

  render() {
    return <Button onPress={this.handlePress} />
  }
}

2. 类属性箭头函数 #

class MyComponent extends React.Component {
  // 类实例初始化时只创建一次，引用不会变化
  handlePress = () => {
    this.makeData('hello')
  }

  makeData(param) {
    // 你的逻辑
  }

  render() {
    return <Button onPress={this.handlePress} />
  }
}

内容的提问来源于stack exchange，提问作者locklock123