javascript - 从带有回调的 this.setState 调用迁移到 useState 和 useEffect

Question

我已经使用新的 React Hooks 近 4 个月了，这是对创建 React 组件的一个很好的调整。目前，我正在尝试从类组件迁移到功能组件，但遇到了一些问题。例如，让我们讨论这个案例并比较函数和类组件，以更好地理解这个问题。

class UserInformation extends React.Component {
    state = {
        isBusy: false,
    };

    updateImage = (uploadedImageData: IUploadImage): void => {
        const imageData = {
            ImageData: base64ToArrayBuffer(uploadedImageData.ImageData.ImageData),
            FileName: uploadedImageData.FileName,
        };

        this.setState({ isBusy: true }, () => {
            this.props.updateSettingsUserImage(this.props.selectedUser, imageData)
                .then(() => this.setState({ isBusy: false }));
        });
    };

    deleteImage = (): void => {
        this.setState({ isBusy: true }, () => {
            this.props.deleteSettingsUserImage(this.props.selectedUser)
                .then(() => this.setState({ isBusy: false }));
        });
    };

    const { selectedUser } = this.props;

    return (
        <BaseInfoCardHeader
           withUploadableAvatar
           style={{ margin: '0 -12px' }}
           name={selectedUser.FullName}
           deleteImage={this.deleteImage}
           updateImage={this.updateImage}
           photopath={selectedUser.Photopath}                        
        />
    );
}

export default UserInformation;

这是 UserInformation 的功能组件版本

const 用户信息 = (props) => { const [isBusy, setIsBusy] = useState(false);

    const updateImage = (uploadedImageData: IUploadImage): void => {
        const imageData = {
            ImageData: base64ToArrayBuffer(uploadedImageData.ImageData.ImageData),
            FileName: uploadedImageData.FileName,
        };
        setIsBusy(true);
    };

    const deleteImage = (): void => setIsBusy(true);

    useEffect(() => {
       if (isBusy) {
          updateSettingsUserImage(props.selectedUser, imageData)
             .then(() => setIsBusy(false));
       }
    }, [isBusy]);

   useEffect(() => {
       if (isBusy) {
          deleteSettingsUserImage(props.selectedUser)
             .then(() => setIsBusy(false));
       }
    }, [isBusy]);

    const { selectedUser } = this.props;

    return (
        <BaseInfoCardHeader
           withUploadableAvatar
           style={{ margin: '0 -12px' }}
           name={selectedUser.FullName}
           deleteImage={this.deleteImage}
           updateImage={this.updateImage}
           photopath={selectedUser.Photopath}                        
        />
    );
}

export default UserInformation;

我们可以看到，在功能组件内部，无论触发 updateImage 还是 deleteImage，在这两种情况下都会运行 2 个 useEffects 并进行 API 调用。但在类组件中，API 调用将在 setState 回调内处理，并且只会请求一次 API 调用。一种选择是为 imageData 添加另一种状态，并在其 useEffect 依赖项列表中使用它。但是，如果我们没有 imageData 并且一切都取决于 isBusy ，该怎么办？处理这种情况的最佳方法是什么？

Answer 1

为什么你甚至需要在这个组件中设置状态？另外要注意的是，不要只是为了新颖性而将类组件转换为功能组件，基于类的组件仍然有一席之地。但你的例子实际上是一个很好的候选者。

    const UserInformation = ({props}) => {
        const [isBusy, setBusy] = useState(false)
        const updateImage = async (uploadedImageData: IUploadImage): void => {
            setBusy(true);
            const imageData = {
                ImageData: base64ToArrayBuffer(uploadedImageData.ImageData.ImageData),
                FileName: uploadedImageData.FileName,
            };
            await updateSettingsUserImage(props.selectedUser, imageData)
            setBusy(false);
        };

        const deleteImage = async (): void => {
          setBusy(true);
          await deleteSettingsUserImage(props.selectedUser);
          setBusy(false);
        }

        const { selectedUser } = props;

        return (
            <BaseInfoCardHeader
               withUploadableAvatar
               style={{ margin: '0 -12px' }}
               name={selectedUser.FullName}
               deleteImage={this.deleteImage}
               updateImage={this.updateImage}
               photopath={selectedUser.Photopath}                        
            />
        );
    }

    export default UserInformation;