我已经解决了我的问题，但是我要在这里了解为什么我的解决方案有效。

我正在实现react-image-crop组件以向我的应用程序添加裁剪功能。

在我的应用中，我将上传的文件的副本保留为File对象，称为image。

所以我想出了这个解决方案：

function Crop(props) {
    const { image } = props
    const [crop,setCrop] = useState({ aspect: 16 / 9 })

    function handleCropChange(crop) {
        console.log('new crop')
        setCrop(crop)
    }

    return <ReactCrop src={URL.createObjectURL(image)} crop={crop} onChange={handleCropChange}></ReactCrop>
}

function Cropper(props) {

  // ...

  return <Crop image={image}></Crop>
}

但是这样做onChange事件会不断触发，从而冻结整个选项卡。 这很奇怪，因为onChange事件的文档指出：

  

onChange（crop，percentCrop）（必需）

     

每次裁剪时都会发生回调（即多次拖动/调整大小）。

这不是正确的行为。

对此，我的解决方案是在Crop组件外部而不是内联创建objectURL。

function Crop(props) {
    const { src } = props
    const [crop,setCrop] = useState({ aspect: 16 / 9 })

    function handleCropChange(crop) {
        console.log('new crop')
        setCrop(crop)
    }

    return <ReactCrop src={src} crop={crop} onChange={handleCropChange}></ReactCrop>
}

function Cropper(props) {

  // ...

  return <Crop src={URL.createObjectURL(image)}></Crop>
}

现在可以了，但是为什么！？