React中调用函数时带()与不带()的区别及适用场景

核心差异 #

• 当你写onChange={test}时，传递的是函数本身的引用。React的事件回调属性（如onChange、onClick）需要接收一个函数类型的值，只有当对应的事件触发时，React才会调用这个函数。这就是为什么只有输入框内容变化时，test才会执行。
• 当你写onChange={test()}时，是立即执行test函数，并把函数执行后的返回值（这里test没有返回值，实际传递的是undefined）传给onChange。而且这个执行动作会在组件每次渲染到该行代码时触发，和输入事件完全无关，所以每次组件渲染都会打印"hi"。

适合使用带括号调用的场景 #

• 初始化或一次性执行逻辑：比如组件挂载时需要调用函数获取初始数据，可以在useEffect中写fetchData()，这样只会在组件挂载（或依赖项变化）时执行一次。
• 需要给函数传递自定义参数：如果test需要接收额外参数（比如输入框的值），不能直接写test(e.target.value)（会立即执行），而是要包裹一层箭头函数作为回调：onChange={(e) => test(e.target.value)}。此时箭头函数是传给onChange的回调，只有事件触发时才会执行带参数的test。
• 调用返回函数的工具函数：部分高阶函数或自定义Hook会返回一个函数，当你需要执行这个返回的函数时，就需要带括号调用。比如在useEffect中执行初始化函数：

  const initData = useInitDataHook();
  useEffect(() => {
    initData(); // 带括号调用返回的初始化函数
  }, []);
  

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