在React useState中调用类方法修改状态而非setState是否为不良实践？

数据老陈

2026-8-15

问题：直接修改useState中的类实例是否属于不良实践？

我在useState钩子中使用了一个类，该类包含一个用于修改自身内容的方法，示例代码如下：

class Test {
    foo: string;

    constructor() {
        this.foo = 'foo';
    }

    modifyFoo() {
        this.foo = 'bar';
    }
}

// ...

const [test, setTest] = useState(new Test());

test.modifyFoo();

// ...

请问调用modifyFoo方法是否属于不良实践？我通常不会不使用setState就修改对象，但在我的场景中这种方式很有用，因为我不想重新声明该类。

回答

这确实属于React中的不良实践。核心原因是：React依赖不可变状态更新来检测变化、触发组件重渲染。直接调用类实例的方法修改自身属性，React无法感知到状态变化，会导致UI无法同步更新，后续还可能引发子组件不更新、副作用不触发等难以排查的问题。

你不想重新声明类的需求完全可以满足，不用破坏React的状态规则，给你两个可行的方案：

修改实例后生成新实例传入setState：
可以给Test类添加一个接收现有实例的构造函数，复制属性后完成修改：

class Test {
    foo: string;

    constructor(initial?: Test) {
        this.foo = initial?.foo || 'foo';
    }

    modifyFoo() {
        this.foo = 'bar';
    }
}

// 使用时
test.modifyFoo();
setTest(new Test(test));

让modifyFoo返回新实例（遵循不可变原则）：
调整类的方法，不修改自身而是返回新的实例，这样直接用setState更新即可：

class Test {
    foo: string;

    constructor(foo: string = 'foo') {
        this.foo = foo;
    }

    modifyFoo() {
        return new Test('bar');
    }
}

// 使用时
setTest(prev => prev.modifyFoo());