ホームページ > 記事 > ウェブフロントエンド > ReactでのsetStateの使い方の詳しい説明

ReactでのsetStateの使い方の詳しい説明

php中世界最好的语言オリジナル: 2018-05-24 14:19:008593ブラウズ

今回は React での setState の使い方について詳しく説明します。 React で setState を使用する際の注意事項について、実際のケースを見てみましょう。

質問する

class Example extends Component {
  contructor () {
    super()
    this.state = {
      value: 0,
      index: 0
    }
  }
  componentDidMount () {
    this.setState({value: this.state.value + 1})
    console.log(this.state.value) // 第一次输出
    this.setState({value: this.state.value + 1})
    console.log(this.state.value) // 第二次输出
    setTimeout(() => {
      this.setState({value: this.state.value + 1})
      console.log(this.state.value) // 第三次输出
      this.setState({value: this.state.value + 1})
      console.log(this.state.value) // 第四次输出
    }, 0)；
        this.refs.button.addEventListener('click', this.click)
  }
  click = () => {
    this.setState({value: this.state.index + 1})
    this.setState({value: this.state.index + 1})
  }
  render () {
    return (
      <p><span>value: {this.state.value}index: {this.props.index}</span>
        <button>点击</button>
      </p>
    )
  }
}

常識によれば、これら 4 つの出力は 1、2、3、4 です。ただし、実際の出力は 0、0、2、3 です

setState に関する注意事項

setState は React コンポーネントの state の値をすぐには変更しません (つまり、setState は非同期更新です)

setState パスキューメカニズムは状態更新を実装します。
setState が実行されると、更新する必要がある状態はすぐに更新されるのではなく、マージされて状態キューに入れられます。バッチ;
これにより、次に setState が呼び出され、状態キューがマージされると、以前に直接変更された値は無視されます。

setState はコンポーネント Redraw の更新プロセスをトリガーすることによってトリガーされます

ライフサイクル
function:

複数の隣接する状態の変更をマージして一度に実行することができます

 this.setState({name: 'Pororo'})
 this.setState({age: 20})

 this.setState({name: 'Pororo'，age: 20})

と同等です

最初の 2 つの setStates について:

this.setState({value: this.state.val + 1});
console.log(this.state.value); // 第一次输出
this.setState({value: this.state.val + 1});
console.log(this.state.value); // 第二次输出

this.state.value=this.state.value+1;

setTimeout の 2 つの setStates:

setTimeout(() => {
  this.setState({value: this.state.value + 1})
  console.log(this.state.value) // 第三次输出
  this.setState({value: this.state.value + 1})
  console.log(this.state.value) // 第四次输出
}, 0)；

同期更新:
は ReactEvent 処理によってトリガーされます。 (例: onClick によってトリガーされるイベント処理)、setState を呼び出すと this.state が非同期的に更新されます
非同期更新:
さらに、setState 呼び出しは this.setState を同期的に実行します。「さらに」とは、React によって addEventListener を通じて直接追加されたイベント処理関数と、setTimeout/setInterval によって生成される非同期呼び出しをバイパスすることを指します。

ReactでのsetStateの使い方の詳しい説明

但是，当React在调用事件处理函数之前就会调用batchedUpdates，这个函数会把isBatchingUpdates修改为true，造成的后果就是由React控制的事件处理过程setState不会同步更新this.state。

同步更新（函数式setState）

如果this.setState的参数不是一个对象而是一个函数时，这个函数会接收到两个参数，第一个是当前的state值，第二个是当前的props，这个函数应该返回一个对象，这个对象代表想要对this.state的更改；
换句话说，之前你想给this.setState传递什么对象参数，在这种函数里就返回什么对象。不过，计算这个对象的方法有些改变，不再依赖于this.state，而是依赖于输入参数state。

function increment(state, props) {
  return {count: state.count + 1};
}
function incrementMultiple() {
  this.setState(increment);
  this.setState(increment);
  this.setState(increment);
}

假如当前this.state.count的值是0，第一次调用this.setState(increment)，传给increment的state参数是0，第二调用时，state参数是1，第三次调用是，参数是2，最终incrementMultiple让this.state.count变成了3。
对于多次调用函数式setState的情况，React会保证调用每次increment时，state都已经合并了之前的状态修改结果。

要注意的是，在increment函数被调用时，this.state并没有被改变，依然，要等到render函数被重新执行时（或者shouldComponentUpdate函数返回false之后）才被改变。

同步异步setState的用法混合

function incrementMultiple() {
  this.setState(increment);
  this.setState(increment);
  this.setState({count: this.state.count + 1});
  this.setState(increment);
}

在几个函数式setState调用中插入一个传统式setState调用，最后得到的结果是让this.state.count增加了2，而不是增加4。
这是因为React会依次合并所有setState产生的效果，虽然前两个函数式setState调用产生的效果是count加2，但是中间出现一个传统式setState调用，一下子强行把积攒的效果清空，用count加1取代。
所以，传统式setState与函数式setState一定不要混用。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

ReactでのsetStateの使い方の詳しい説明

質問する

setState に関する注意事項

同步更新（函数式setState）

同步异步setState的用法混合

関連記事