我如何信任React.js中的状态

Question

因此，在react中， setState()是异步的，并且可以缓冲更改状态的调用。 我明白了。 以及如何使用setState((state) => {})与可选的回调一起使用，如果您以某种方式依赖状态来计算新状态，该如何使用它。

但是可以说我不想简单地更新状态，而只是要确定它在特定时间点实际包含什么？ 让我们做一个例子：

我有一个文本字段。 当有人编辑该字段时，它将使用setState({ hasChanged: true })设置状态。 很好。 在onClick回调上（在其他地方），我想检查文本字段是否已“更改”，并在继续之前保存其文本内容。 但问题是我永远无法真正确定state.hasChanged实际上与现实保持同步。 与setState((state) => {})的回调不同，我在这里独自一人。

那么，我是否要创建一个“影子状态”（或者至少是一个与反应状态分离的状态变量），并仅针对诸如此类的情况进行更新？ 似乎有点麻烦，我怀疑这不是您应该怎么做，因此是这个问题。

编辑以澄清问题：我只希望“检查”状态并确保其内容（因为我是我的情况，因此我将视情况对磁盘进行保存）。 我实际上不会更新状态。 如果是这种情况，则带回调的setState可能是正确的选择。

Answer 1

这是一个相当理论上的问题，对于您所给出的示例来说，这绝不会成为问题。

无论如何，您可以将回调作为第二个参数传递给setState，状态更改后将立即调用它。

Answer 2

这就是为什么React具有生命周期的原因，您可以在其中通过诸如componentWillUpdate ， componentDidUpdate等方法进行侦听（您可以在此处查看完整列表）。 按照您的示例，当文本字段更改时，状态value将更新，您可以在方法componentWillUpdate和componentDidUpdate “拦截”此更改，如下所示：

 class Main extends React.Component { constructor(props) { super(props); this.state = { value: '' }; this._handleOnChange = this._handleOnChange.bind(this); } componentWillUpdate(nextProps, nextState) { if(nextState.value !== this.state.value) { console.log('value will update'); } } componentDidUpdate(prevProps, prevState) { if(prevState.value !== this.state.value) { console.log('value did update', this.state.value); } } render() { return ( <form> <input type='text' autoFocus onChange={this._handleOnChange} ref='text'/> </form> ); } _handleOnChange() { this.setState({ value: this.refs.text.value }); } } ReactDOM.render(<Main />, document.getElementById("main")); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="main"></div> 

您可以在官方文档中找到有关状态和生命周期的更多信息。

Answer 3

我真的认为这是一个非常困难的情况。 我们知道setState只需花费几分之一秒的时间来执行，并且在实际情况下，单击按钮时，状态已经改变。

为了能够完全相信react很好，我可以想到一些想法：

• 当this.state.hasChanged为false时，可以禁用该按钮。 因此，您应始终等待下一个render以检查hasChanged的状态并启用它。

• 在state为new的内部使用新键表示lastAction和componentDidUpdate帮助来制定规则，例如：

  if (this.state.lastAction === "myLastAction")