React Native Button的onPress函数与props最佳实践咨询（新手向）

首先明确：JSX中直接写匿名箭头函数并非绝对禁用，但确实存在核心问题——一是每次组件渲染都会创建新的函数实例，若子组件做了React.memo这类性能优化，可能触发不必要的重渲染；二是逻辑直接内嵌在JSX里，可读性和可维护性会随逻辑复杂度上升而骤降。所以更推荐把逻辑抽离成具名函数，这是保持组件整洁的关键原则。

回到你给出的两种CustomButton写法：

写法一分析 #

export const CustomButton = (props) => {
  return (
    <Button
      onPress={() => props.onButtonPress(item.socketId)}>
      Decline
    </Button>
  )
}

这种写法看似简洁，但缺点很突出：

• 匿名函数无语义化名称，其他开发者需要逐行读逻辑才能理解功能；
• 后续若要扩展逻辑（比如加参数校验、日志打印），只能直接修改JSX内的箭头函数，会让UI层代码变得臃肿；
• 每次渲染都会生成新的函数实例，不利于子组件（若Button做过性能优化）的渲染性能。

写法二分析 #

export const CustomButton = (props) => {
  const handleDisconnect = (socketId) => {
    props.onButtonPress(socketId)
  }

  return (
    <Button
      onPress={() => handleDisconnect(item.socketId)}>
      Decline
    </Button>
  )
}

这种写法更符合React组件的最佳实践，理由如下：

1. 可读性更强：handleDisconnect的函数名直接点明了点击事件的意图，无需读具体逻辑就能理解功能；
2. 可维护性更高：后续要扩展逻辑（比如加错误捕获、参数预处理），直接在handleDisconnect内修改即可，不会污染JSX的UI结构；
3. 性能优化空间大：如果CustomButton需要用React.memo包裹避免无效重渲染，可以配合useCallback缓存函数实例：

   import { useCallback } from 'react';
   
   export const CustomButton = ({ onButtonPress, item }) => {
     const handleDisconnect = useCallback(() => {
       onButtonPress(item.socketId);
     }, [onButtonPress, item.socketId]);
   
     return (
       <Button onPress={handleDisconnect}>
         Decline
       </Button>
     )
   }
   

   这样只要依赖项onButtonPress和item.socketId未变化，handleDisconnect就不会生成新实例，避免触发Button的无意义重渲染。

额外保持组件整洁的建议 #

• 解构props：把需要的props提前解构出来，避免反复写props.xxx，让代码更简洁；
• JSX只负责UI描述：所有业务逻辑、参数处理都放在JSX之外的具名函数里，不要让UI层混杂复杂逻辑；
• 通用逻辑抽离到工具函数：如果handleDisconnect里的逻辑足够通用（比如socket操作），可以抽成单独的工具文件，让组件更轻量化；
• 统一函数命名规范：事件处理函数用handleXxx、onXxx这类前缀，保持代码风格一致。

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