js垃圾回收机制的问题

Question

问题描述

item是有一直被引用的不会被回收，但是我如果定义一个变量const a = item.fileId，然后将() => a传给getValueFromEvent，期望它返回item.fileId。实际情况当它执行的时候，a已经变为undefined了，感觉被回收了

相关代码

renderSortableElement = (item, idx) => {
    const {
      form: { getFieldDecorator },
    } = this.props;
    const { formItems, medalName } = this.state;
    
    // const a = item.fileId

    return (
      <div key={item.key}>
        <Form.Item {...formItemLayout} label="奖章封面">
          <div style={{ display: 'flex' }}>
            {getFieldDecorator(`fileId[${item.key}]`, {
              initialValue: item.fileId,
              getValueFromEvent: () => item.fileId,
              rules: [
                {
                  required: true,
                  message: '请上传奖章封面!',
                },
              ],
            })(
              <Upload
                {...baseUploadProps}
                listType="picture-card"
                className="medal-edit-form-cover-uploader"
                showUploadList={false}
                beforeUpload={file =>
                  beforeImageUpload({
                    file,
                    // limit: element => {
                    //   if (element.width !== element.height) {
                    //     message.error('奖章图片尺寸必须为1:1!');
                    //     return false;
                    //   }
                    //   return true;
                    // },
                  })
                }
                onChange={info => this.handleUploadChange(info, item.key)}
              >
                {item.fileUrl ? (
                  <img style={{ width: '100%' }} src={getResourceUrl(item.fileUrl)} alt="avatar" />
                ) : (
                  <div>
                    <Icon type="plus" />
                  </div>
                )}
              </Upload>,
            )}
        </Form.Item>
      </div>
    );
  };

你期待的结果是什么？

期望a能取到item.fileId

Answer 1

看起来， renderSortableElement 是一个无状态组件，无状态组件的使用方式如下：

    <RenderSortableElement 
        prop1 = {'prop1'}
        prop2 = {'prop2'}
    />

这样一来，如果你在函数体里打印 item 的话，结果应该是：

 >item:{
    prop1: 'prop1',
    prop2: 'prop2'
 }

结果表明，向组件传递的参数全部都成为了对象 item 的属性，item也只会包含这些属性，如果没有向组件传递 fileId 参数的话，item.fileId 就是 undefined。
无状态组件的实现理应是一个纯函数，也就是说任意两次调用的结果都不会相互影响，而且每一次调用都是发生在引用此组件的 .render 生命周期函数体的，其中用到的状态，要么在 render 函数执行时传入，要么从一个可以不受 render 影响的作用域里引用，比如引用全局变量，或者在组件外写一个闭包，后两种方法都不应推荐。
如果 renderSortableElement 是作为高阶组件的参数使用的，另当别论，最好把调用此函数的代码也贴出来。