Reactの2つのES6矢印機能の違いは何ですか？

Question

ボタンをクリックすると、ボタンの値が0から1だけ増加する​​が呼び出されます。 ​​のコードを2つの異なるシナリオで作成しました。私は最初のことを理解しています、私は第二のものを把握していないようです。

これは私が書いたものです。そして、それは動作します。

handleClick =() => { 
    this.setState({count: this.state.count + 1}) 
    } 

チュートリアルでは、このいずれかを示し、それはあまりにも動作します。

handleClick =() => { 
    this.setState(({count}) => ({ 
     count: count + 1 
    })) 
    } 

私はこれにコードを変更すると、これはあまりにも動作します。

handleClick =() => { 
    this.setState(() => ({ 
     count: this.state.count + 1 
    })) 
    } 

それは同じことを行いますが最初のものよりも複雑であるとき、コードの2体を使用する利点は何ですか？

私は、基本的には最初のコード本体で生成する代わりに書いたオブジェクトリテラルを返すことを理解しています。しかし、私はパラメータを空にして、本体にthis.state.countを使用するだけで、なぜ{count}をパラメータとして渡すのですか？

Answer 1

リアクションでは、this.setState()が変更をキューに入れます。すぐに起こることは保証されていません。したがって、setStateが実際に変更を行うまでには、this.state.countの値が変更されている可能性があります。

2番目のバージョンでは、関数をthis.setState()に渡しています。 Reactが状態を変更する準備ができたら、現在の状態を引数としてその関数が呼び出されます。これにより、状態が正しくインクリメントされるようにすることができます。

The React documentationがさらに詳細になります。