React组件中onClick={movieClicked(movie)}及嵌套箭头函数逻辑详解

一、嵌套箭头函数movieClicked的作用 #

这段代码是一个返回函数的高阶函数，拆解来看：

const movieClicked = movie => evt => {
    props.movieClicked(movie)
}

• 第一层函数movie => ...：接收当前遍历到的电影对象movie作为参数，借助闭包特性，这个movie会被临时“保存”下来。
• 返回的第二层函数evt => ...：这才是React点击事件真正会调用的处理函数，evt是浏览器自动传入的点击事件对象（这里代码没用到它，但React会按规则传递）。
• 当点击事件触发时，第二层函数执行，最终调用父组件通过props传入的movieClicked方法，并把之前保存的当前电影对象movie传进去，让父组件能精准知道是哪部电影被点击了。

二、onClick={movieClicked(movie)}的执行逻辑 #

React的onClick属性要求接收一个函数引用，而不是函数执行的结果，这里的写法是关键：

• 当组件渲染遍历电影列表时，调用movieClicked(movie)，其实是执行了第一层函数，传入当前的movie，然后返回第二层的事件处理函数。
• 此时onClick拿到的是这个返回的函数引用，而不是立刻执行函数。只有当用户点击<h2>元素时，这个引用的函数才会触发，进而调用父组件的props.movieClicked并传递对应的电影对象。

为什么不直接写onClick={props.movieClicked(movie)}？ #

如果直接这么写，组件渲染时就会立刻执行props.movieClicked(movie)，而不是点击时才执行，这会导致不必要的函数调用（甚至可能引发无限渲染）。而通过嵌套函数的方式，我们实现了“点击时才执行目标函数，并携带正确的movie参数”的效果。

替代写法 #

其实也可以用内联箭头函数实现相同效果：

<h2 className="text-xl" onClick={() => props.movieClicked(movie)}>
  {movie.title}
</h2>

两种写法逻辑等价，嵌套函数的方式只是把事件处理逻辑做了封装，让JSX部分更简洁。

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