Question

我不清楚在React组件中使用this.state。虽然我可以创建this.state.myvar，但为什么我不应该创建this.myvar？

class MyComponent extends Component {
    state = {myvar: 123};

    render() {
        return <span>{this.state.myvar}</span>;
    }
}

或

class MyComponent extends Component {
    myvar = 123;

    render() {
        return <span>{this.myvar}</span>;
    }
}

我意识到有this.setState之类的助手，但最后this.state只是方便，对吧？或者它在React中扮演更重要的角色？我应该避免直接在this设置属性来存储我的状态吗？如果是这样，为什么？

Answer 1

不，实际上;相当错误。

react组件中的

this.state是一个特殊的React支持的容器，只有在使用setState时才会被确认已更新，这会触发重新呈现，可能 em>导致DOM更新（或不是，取决于React的diff算法在JS虚拟dom中发生的事情）。

当然，您也可以使用绑定到this的对象属性，但更改它们对组件本身绝对没有任何作用。 React不会查看您的完整组件实例进行更改，它只会查看（内部）状态，并且（当由父母更改时）在道具处。

因此，您无法创建＆＃34;像this.state.myvar这样的东西然后期望它们实际上存在于生命周期函数到生命周期函数中：作为一种特殊的管理结构，你在state调用之外的setState上的任何值都有未定义的行为。它们可能存在，或者它们可能不存在。如果您确实在使用内部状态，则需要通过setState({ myvar: value})发出更改信号。

当然，这并不意味着您无法使用this.myvar，这样可以正常工作，但更改它不会＆＃34;做＆＃34;除了字面意思之外的任何事情。

您何时使用this.val代替州？当您的组件必须执行导致＆＃34;中间＆＃34;国家，既不是一个可渲染的国家，也不是下一个国家。例如，当代码可以在渲染之间多次更新状态值时，在这些更改期间，组件处于中间状态，因此您不希望它重新渲染。事实上，期待它可能导致巨大的错误：

... doTest() { this.setState({ val: this.state.val+1 }); this.setState({ val: this.state.val+1 }); this.setState({ val: this.state.val+1 }); }, ...

此代码将不产生比之前更高的this.state.val，因为状态更新已排队，并相互覆盖。只有重新渲染之前的最后一条指令才会赢得＃34;胜利。所以在这种情况下你需要像：

... doTest() { var localval = this.state.val; localval++; localval++; localval++; this.setState({ val: localval }); }, ...

然后，如果我们还需要在此函数之外访问该值，那么我们 finally 可以合法地使用this属性：

... doTest() { this.accessibleval = this.state.val; this.updateValueAFewTimes(); this.setState({ val: this.accessibleval }); }, ...

Answer 2

this.state扮演的角色比你意识到的要大。

通过this.setState设置状态会触发组件重新渲染（除其他外）。否则，React无法知道什么时候它取决于改变。

我必须在React中使用this.state来维护组件状态吗？

2 个答案: