函数声明和函数表达式，是否立即调用的问题|上海|网络公司|上海茂联网络有限公司

函数声明和函数表达式，是否立即调用的问题

2026-03-20

https://www.bilibili.com/video/BV1ZB4y1Z7o8?spm_id_from=333.788.videopod.episodes&vd_source=5fa338953c49cd2c52e91d8f48756175&p=5

//正常定义的函数
function getName(){
return 'jack'
}

function App(){
  return(
     {getName()}
   )
}
export default App

https://www.bilibili.com/video/BV1ZB4y1Z7o8?spm_id_from=333.788.videopod.episodes&vd_source=5fa338953c49cd2c52e91d8f48756175&p=9

const 变量的箭头函数

function App(){
  const handleClick=()=>{
    console.log('button被点击了')
  }
  return(
    <div className="App">
         <button onClick={handleClick}>click me</button>
     </div>
   )
}
export default App

React 代码中一个非常基础且重要的知识点。

核心原因：函数定义的方式不同

在 JavaScript/React 中，函数名前加不加 const，本质上是两种完全不同的函数定义方式，适用场景也不同。

1. 代码 1 中的函数：函数声明（Function Declaration）

jsx

// 这是【函数声明】，不需要 const
function getName(){
  return 'jack'
}

function App(){
  return(
    // 注意：这里你的代码有语法错误，JSX 中直接返回字符串需要包裹标签，我帮你修正了
    <div>{getName()}</div>
  )
}
export default App

特点：用 function 函数名() 定义的函数，属于「函数声明」，它会被 JavaScript 引擎提升（hoist）（简单说就是代码执行前就会被识别）。
适用场景：通常用于定义独立的、可复用的全局 / 模块级函数（比如你的 getName），或者组件函数本身（比如 App）。

2. 代码 2 中的函数：函数表达式（Function Expression）

jsx

function App(){
  // 这是【函数表达式】，必须用 const/let/var 声明
  const handleClick = () => {
    console.log('button被点击了')
  }
  
  return(
    <div className="App">
      <button onClick={handleClick}>click me</button>
    </div>
  )
}
export default App

特点：const handleClick = () => {} 本质是「把一个函数赋值给一个变量」，属于函数表达式（这里用的是箭头函数，普通函数也可以：const handleClick = function() {}）。既然是变量赋值，就必须用 const/let/var 声明这个变量（推荐用 const，因为点击事件处理函数一般不需要重新赋值）。
适用场景：通常用于定义组件内部的「局部函数」（比如事件处理函数、工具函数），因为这类函数只在组件内部使用，不需要提升，也不需要暴露到外部。

补充：为什么推荐用 const 而不是 let/var？

const：声明的变量不可重新赋值，符合事件处理函数「定义后不再修改」的特性，代码更安全（避免意外覆盖）。
let：声明的变量可以重新赋值，除非你明确需要修改这个函数变量，否则不用。
var：老旧的声明方式，存在变量提升、作用域混乱等问题，React 中几乎不用。

总结

函数声明（function 名()）：无需 const，适用于全局 / 模块级函数（如组件函数、独立工具函数）。
函数表达式（const 名 = () => {}）：必须加 const（或 let），适用于局部函数（如组件内的事件处理函数）。
React 中组件内的事件处理函数、钩子函数（如 useEffect 里的回调），几乎都用「函数表达式 + const」的写法，这是行业最佳实践。

{getName()}和{handleClick}调用的话，一个有括号，一个没有。

这是 React/JavaScript 中一个高频易错点，核心区别在于：是否需要立即执行函数，以及是否要传递函数本身。

我用通俗的方式拆解这个问题：

1. {getName ()} —— 加括号：立即执行函数，取返回值

jsx

function getName(){
  return 'jack'
}

// JSX 中 {getName()} 的含义：
// 1. 立即执行 getName 函数
// 2. 把函数的返回值（'jack'）渲染到页面上
return <div>{getName()}</div> 
// 等价于：return <div>jack</div>

场景：你需要的是「函数执行后的结果」（比如字符串、数字、JSX 元素），而不是函数本身。
如果不加括号会怎样？
jsx
```
return <div>{getName}</div> 
// 页面会渲染出函数的源码：function getName(){ return 'jack' }
```
这是因为不加括号时，你传递的是「函数对象本身」，而不是函数执行后的结果，JSX 会把函数转成字符串显示，这显然不是你想要的。

2. {handleClick} —— 不加括号：传递函数本身，等待触发

jsx

const handleClick = () => {
  console.log('button被点击了')
}

// JSX 中 onClick={handleClick} 的含义：
// 1. 把 handleClick 函数本身「赋值」给 onClick 事件属性
// 2. 只有当按钮被点击时，浏览器才会执行这个函数
return <button onClick={handleClick}>click me</button>

场景：你需要的是「函数本身」（作为事件处理程序），让浏览器在特定时机（比如点击）执行它，而不是立即执行。
如果加括号会怎样？
jsx
```
return <button onClick={handleClick()}>click me</button>
```
这是新手最容易犯的错误：
1. 组件渲染时，handleClick() 会立即执行（控制台马上打印 "button 被点击了"）；
2. 因为函数没有返回值（默认返回 undefined），相当于 onClick={undefined}；
3. 点击按钮时，没有任何反应（因为 onClick 拿到的是 undefined，不是函数）。

补充：特殊场景 —— 需要传参时怎么写？

如果事件处理函数需要传参，不能直接写 onClick={handleClick(参数)}（会立即执行），需要用「箭头函数包裹」：

jsx

const handleClick = (name) => {
  console.log(`点击了：${name}`)
}

// 正确写法：用箭头函数包裹，传递「待执行的函数」
return <button onClick={() => handleClick('jack')}>click me</button>

原理：() => handleClick('jack') 是一个「新的函数」，赋值给 onClick；
只有点击时，才会执行这个新函数，进而执行 handleClick('jack')。

总结

加括号 ({函数 ()})：立即执行函数，取返回值渲染到页面（适用于获取函数结果的场景）；
不加括号 ({函数})：传递函数本身，等待事件触发执行（适用于事件处理、回调函数场景）；
核心原则：想要「结果」就加括号，想要「函数本身」就不加括号。

技术文献

函数声明和函数表达式，是否立即调用的问题