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

do I have to use this.state in React to maintain component state?

本文关键字：state this 维护 状态 组件 是否 React      更新时间：2023-09-26

我不清楚在 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上设置属性来存储我的状态？如果是这样，为什么？

不，事实上;相当错误。

反应组件中的this.state是一个特殊的 React 支持的容器，只有在使用 setState 时才会被确认为已更新，这会触发重新渲染，这可能会导致 DOM 更新（或不更新，取决于 React 的差异算法在 JS 虚拟 dom 中看到的情况）。

当然，您也可以使用绑定到this的对象属性，但更改它们对组件本身绝对没有任何作用。React 不会查看您的完整组件实例以获取更改，它只查看（内部）状态，以及（当被父级更改时）查看 props。

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

当然，这并不意味着你不能使用 this.myvar ，这将正常工作，但更改它不会"做"任何事情，而不仅仅是字面意思。

什么时候使用this.val而不是状态？当组件必须执行导致"中间"状态的操作时，既不是一个可呈现状态，也不是一个可呈现状态。例如，当代码可以在渲染之间多次更新状态值时，在这些更改期间，组件处于中间状态，因此您不希望它重新呈现。事实上，期望它会导致巨大的错误：

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

此代码不会产生比以前高 3 的this.state.val，因为状态更新已排队并相互覆盖。只有重新渲染前的最后一条指令"获胜"。因此，在这种情况下，您需要类似以下内容：

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

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

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

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

通过this.setState设置状态会触发组件重新渲染（以及其他内容）。否则，React 将无法知道它所依赖的东西何时发生了变化。

相关文章：