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

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 时才会被确认已更新，这会触发重新渲染，这可能会导致 DOM 更新(或不会，取决于 React 的 diff 算法在 JS 虚拟 dom 中看到的情况)。

当然，您也可以使用绑定(bind)到 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 });
},
...