React渲染函数内传递带括号函数触发无限调用问题求助

为什么带括号传入会导致无限调用 #

React在渲染组件时会同步执行JSX中所有{}包裹的表达式，你写<ChildForm onSave={onClickRefresh()} />时，相当于在渲染阶段直接调用onClickRefresh函数，而非把函数作为回调传递给onSave属性。
如果onClickRefresh内部执行的refreshEntirePage方法会触发状态更新，就会导致父组件重渲染，重渲染时又会再次执行onClickRefresh()，形成「调用→状态更新→重渲染→调用」的无限循环。

为什么去掉括号传函数本身功能不生效 #

直接传递函数引用时功能失效通常是两类原因：

• 函数来自子组件ref：父组件首次渲染时子组件还未完成挂载，ref指向为空，此时传递的onClickRefresh是undefined，onSave触发时没有可执行的逻辑
• 存在闭包陷阱：onClickRefresh定义时捕获的updatedData等变量是旧的渲染快照值，执行时用了过期数据导致逻辑不符合预期

• 方案1：用箭头函数包裹调用，避免渲染时直接执行
  不要直接在JSX中写函数调用，而是用箭头函数包裹，只有onSave被点击触发时才会执行内部逻辑：

  <ChildForm onSave={() => onClickRefresh()} />
  

  如果onSave回调需要透传参数，写法调整为：

  <ChildForm onSave={(...args) => onClickRefresh(...args)} />
  

• 方案2：适配ref调用场景，处理挂载时机问题
  如果onClickRefresh是通过ref从子组件获取的方法，需要先确保子组件用useImperativeHandle暴露了对应方法，并且调用时加可选链避免未挂载时报错：
  子组件暴露逻辑示例：

  import { forwardRef, useImperativeHandle } from 'react';
  const ChildForm = forwardRef((props, ref) => {
    const onClickRefresh = async() => {
      if(activeListPageRef.current) {
          aPageRef.current.refreshEntirePage(updatedData);
      }
    }
    // 把方法暴露给父组件的ref
    useImperativeHandle(ref, () => ({
      onClickRefresh
    }))
    // 内部Save按钮触发onSave回调
    const handleSave = () => {
      // 自定义保存逻辑
      props.onSave?.()
    }
    return <button onClick={handleSave}>Save</button>
  })
  

  父组件调用示例：

  import { useRef } from 'react';
  const parentComponent = () => {
    const childFormRef = useRef(null);
    return <ChildForm 
      ref={childFormRef} 
      onSave={() => childFormRef.current?.onClickRefresh()} 
    />
  }
  

• 方案3：解决闭包陷阱问题
  如果是内部变量过期导致的逻辑失效，用useCallback包裹onClickRefresh，并把所有内部用到的可变变量填入依赖数组，保证函数引用捕获的永远是最新值：

  import { useCallback } from 'react';
  const onClickRefresh = useCallback(async() => {
    if(activeListPageRef.current) {
        aPageRef.current.refreshEntirePage(updatedData);
    }
  }, [updatedData]) // 所有内部用到的可变变量都要加入依赖项
  

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