内联与提取点击处理函数的两个React组件是否存在差异？

先给出明确结论：你听到的说法不完全准确，这两个组件在函数创建的核心行为上几乎一致，但如果涉及子组件优化，会存在间接差异。

先贴出两个组件的代码：

function App1 () {
    return <button onClick={() => null}>Click me</button>
}

function App2 () {
    const fn = () => null;
    return <button onClick={fn}>Click me</button>
}

核心行为：函数实例的创建次数 #

• App1的内联箭头函数：每次组件重渲染（比如父组件更新、自身state变化）时，都会生成一个全新的函数实例——因为这个函数是在return的JSX里直接定义的，组件每执行一次（渲染）就会重新创建它。
• App2的fn：同样，每次组件重渲染时，也会创建一个全新的函数实例！const fn = () => null写在组件函数内部，组件每执行一次就会重新声明并赋值这个函数，和App1的内联写法本质上没有区别，你听到的“App2不会重复创建”是错误的。

真正避免函数重复创建的写法 #

如果想让函数实例在组件多次渲染时保持稳定，有两种常用方式：

1. 把函数移到组件外部：

const handleClick = () => null;

function App2 () {
    return <button onClick={handleClick}>Click me</button>
}

这种写法下，handleClick只会在模块加载时创建一次，组件每次渲染都复用同一个函数实例。

2. 使用useCallback钩子缓存函数：

import { useCallback } from 'react';

function App2 () {
    const fn = useCallback(() => null, []); // 空依赖数组表示永远缓存
    return <button onClick={fn}>Click me</button>
}

useCallback会在依赖项（第二个参数的数组）不变时，返回同一个函数实例，避免每次渲染都创建新的。

间接差异：对子组件优化的影响 #

如果这个按钮是自定义的子组件，并且用React.memo做了浅比较优化（避免不必要的重渲染）：

• App1的内联写法会导致子组件每次都重渲染，因为onClick的函数引用每次都是新的，React.memo会判定props发生变化。
• 而用上面两种稳定函数引用的写法，子组件只会在真正需要的时候重渲染。

但回到你给出的两个原组件（都是用原生button），这种差异几乎不会有实际影响——原生DOM元素的事件绑定不会因为函数引用变化产生性能问题，函数重复创建的微小开销也可以忽略不计。

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