在反应中使用类作为 useState 挂钩是不好的做法吗？

Question

我有一个带有 useState 挂钩的组件，我将 SelectionArea class 传递到该挂钩中。我这样做是为了提高代码的可读性和可用性。这是不好的做法吗？这对性能有何影响？

组件代码：

const [selectionArea, setSelectionArea] = useState<SelectionArea | null>(null);

if (selectionArea === null) {
    setSelectionArea(new SelectionArea({
        offsetX : event.nativeEvent.offsetX,
        offsetY : event.nativeEvent.offsetY
    }));
}  else {
    setSelectionArea(new SelectionArea({
        offsetX : selectionArea.getOffsetX(),
        offsetY : selectionArea.getOffsetY(),
        width   : event.nativeEvent.offsetX - selectionArea.getOffsetX(),
        height  : event.nativeEvent.offsetY - selectionArea.getOffsetY()
    }));
}

SelectionArea.ts:

class SelectionArea
{
    private readonly offsetX : number;
    private readonly offsetY : number;
    private readonly width   : number;
    private readonly height  : number;

    public constructor(options?: ISelectionArea)
    {
        this.offsetX = options?.offsetX || 0;

        this.offsetY = options?.offsetY || 0;

        this.width   = options?.width   || 0;

        this.height  = options?.height  || 0;
    }

    public getWidth(): number
    {
        return this.width;
    }

    public getHeight(): number
    {
        return this.height;
    }

    public getOffsetX(): number
    {
        return this.offsetX;
    }

    public getOffsetY(): number
    {
        return this.offsetY;
    }
}

export default SelectionArea;

Answer 1

这本身并不是坏习惯，你只需要确保你永远不会在内部改变实例（因为 React 不会注意到并且不会重新渲染组件）。

但是，鉴于您已经在使用 TypeScript，最好只使用 SelectionArea 界面，如果您需要额外的功能，您通常会在类，您可以将它们建模为自由函数 á la function getLowerCorner(sa: SelectionArea): [number, number].

在反应中使用类作为 useState 挂钩是不好的做法吗？

Is it bad practice to use classes for the useState hook in react?

reactjs

react-hooks

react-typescript

use-state

在反应中使用 类 作为 useState 挂钩是不好的做法吗？

Is it bad practice to use classes for the useState hook in react?

reactjs

react-hooks

react-typescript

use-state

在反应中使用类作为 useState 挂钩是不好的做法吗？