React中ModalItem组件如何获取num值及内存占用疑问

问题1：当通过map渲染的ModalItem组件被点击时，handleModal事件监听函数如何知晓num的值以修改currOpen状态？ #

常用的实现思路有两种，核心都是让回调能捕获到当前循环的num值：

• 绑定事件时直接传递参数：在map循环里给ModalItem绑定点击事件时，用箭头函数把当前迭代的num传入handleModal，示例代码如下：

  {list.map(num => (
    <ModalItem 
      key={num} 
      onClick={() => handleModal(num)} 
    />
  ))}
  

  箭头函数会在每次循环时捕获当前的num变量，点击触发时就会把对应的值传递给handleModal，函数里就能用这个值修改currOpen状态。
• 利用组件props传递封装好的回调：如果ModalItem内部有自己的点击逻辑，可在组件内部接收onClick props，触发时直接调用。本质还是借助闭包特性，让回调保留当前循环的num上下文。
  另外也可以通过给元素添加data-num属性，在handleModal里通过event.target.dataset.num获取值，但需要额外做类型转换，不如前两种方式直接。

问题2：因map循环渲染三次ModalItem组件，其内部代码与函数是否会在内存中占用三个独立空间？ #

要分两部分来看：

• 组件的定义本身：不管渲染多少次，ModalItem的组件函数（比如函数组件的function ModalItem() {}）只会在内存中存在一份，所有实例共享这个定义，不会重复占用空间。
• 组件内部的局部变量与未缓存函数：每次渲染组件实例时，内部的局部变量、没有用useCallback缓存的函数都会重新创建，每个实例会持有独立的副本，占用各自的内存空间。比如如果ModalItem内部定义了const handleClick = () => {}，三个实例就会生成三个不同的handleClick函数引用。
  如果想减少内存占用，可以用React的useCallback钩子缓存内部函数，或者把函数定义移到组件外部，实现函数复用。

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