React中函数间参数如何传递？10是如何传入incrementCounter的num形参的？

整个传递过程遵循React单向数据流规则与原生JS函数调用逻辑，按执行顺序拆分如下：

• 第一步：父组件App内定义接收参数的目标函数
  组件初始化阶段通过useCallback缓存incrementCounter函数，该函数显式声明形参num，内部逻辑为将num的值累加到计数器状态counter上。由于useCallback依赖数组为空，该函数的引用在App组件全生命周期内保持不变。
• 第二步：父组件将函数作为属性传递给子组件
  useMemo回调返回<Button incrementButton={incrementCounter} />，此处将父组件中定义的incrementCounter函数本身，以incrementButton为属性名传入子组件Button。因为useMemo依赖数组仅包含引用不变的incrementCounter，该传值动作仅在组件首次渲染时执行一次。
• 第三步：子组件接收父组件传来的函数引用
  Button组件从入参props中直接解构出incrementButton，此时子组件拿到的incrementButton和父组件中的incrementCounter是完全相同的函数引用，不存在额外包装或拷贝。
• 第四步：点击事件触发时传入实参10
  原生button元素的onClick事件绑定了箭头函数() => incrementButton(10)：当用户点击+按钮时，浏览器触发点击事件并执行该箭头函数，箭头函数内部调用incrementButton时主动将数值10作为实参传入。由于incrementButton和父组件的incrementCounter是同一个函数，10会直接匹配到incrementCounter的形参num，最终执行计数器更新逻辑。

此处onClick外层包裹箭头函数的作用，是避免组件渲染阶段就直接执行incrementButton(10)，保证函数仅在点击事件触发时才会被调用传参。

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