React组件中异步回调作为Props传递与调用的语法规范

先看你定义的异步函数：

const doAsync = async (obj) => {
   await doSomethingAsync(obj)
}

问题1：向子组件传递异步回调的正确方式 #

下面逐个分析三种写法的差异：

• asyncCallback={doAsync(obj)}：错误用法
  这种写法会在父组件渲染时立即执行doAsync(obj)，然后把函数执行后返回的Promise传给子组件的asyncCallback属性。但子组件需要的是一个可调用的回调函数，而不是已经执行后的结果，所以这不符合需求，除非你明确要传递Promise对象，否则不要这么写。

• asyncCallback={async () => await doAsync(obj)}：适用于提前绑定参数的场景
  这是传递一个匿名异步箭头函数，当子组件调用asyncCallback()时，才会执行doAsync(obj)。适合你需要提前把obj参数绑定好的情况（比如obj是父组件的状态或固定值）。
  注意：如果obj是会变化的变量，建议用useCallback包裹这个箭头函数，避免父组件每次渲染都创建新函数，导致子组件不必要重渲染：

  const boundCallback = useCallback(async () => {
    await doAsync(obj)
  }, [obj])
  
  <MyComponent asyncCallback={boundCallback} />
  

• asyncCallback={doAsync}：优先推荐的灵活写法
  直接传递函数本身，子组件调用时需要自行传入obj参数。这种方式更灵活，子组件可以根据自身逻辑传入不同的obj值，而且不会额外创建新函数，性能更优。除非你需要提前绑定固定参数，否则优先用这种写法。

问题2：在等元素中调用异步函数的正确方式 #

同样分析两种写法的适用场景：

• onClick={async (obj) => doAsync(obj)}：适用于传递自定义参数
  这里要注意，onClick的默认参数是事件对象event，如果你的obj是指事件对象，可以写成async (e) => doAsync(e)；如果是要传递自定义参数（比如某个状态或固定值），就写成async () => doAsync(yourCustomObj)。
  另外，异步函数可以直接用在onClick，但如果需要处理错误，建议在内部加try/catch，避免未捕获的Promise错误：

  <button onClick={async () => {
    try {
      await doAsync(yourCustomObj)
    } catch (err) {
      console.error('异步操作失败:', err)
    }
  }}>点击执行</button>
  

• onClick={doAsync}：适用于函数接收默认事件参数或无需参数的场景
  直接绑定函数本身，此时doAsync会接收到onClick传入的事件对象event。如果doAsync的参数正好是事件对象，或者函数不需要参数，这种写法更简洁。但如果doAsync需要的是自定义参数，直接这么写会把event传给它，不是你想要的结果，这时候就需要用箭头函数包裹。

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