setset ()を返す

我々のコホートが反応について学び始めたので、我々が学んだ最初の概念のうちの1つは州と小道具の使用です.どのような事前知識なしでも、それは最初に間違いなく心のこもったでした.もちろん、それは複数のラボ実践の後で沈没し始めました.うまくいけば、あなたはより良い感覚を作る際に、このブログに役立つでしょう.

州対小道具
前に移動する前に、私は正直にそれは理解していた最初のものだったので、私は状態と小道具を区別したい.
状態は特定のコンポーネントの内部に保持されたデータです.一方、propsは親コンポーネントから渡されたデータです.
主な違いはどのコンポーネントがそのデータを所有しているかです.また、コールバック関数も小道具として渡された場合にのみ子要素が更新されます.コールバック関数は、親コンポーネントの状態の上流更新をトリガーします.
次に、コンポーネントの状態を更新する関数について話しましょう.

TLR

• setState() is asynchronous
• pass a function instead of an object if you are doing some kind of calculations based on the actual current state
• setState() can accept a callback function

setstat ()
使用setState() 基本的にコンポーネントの状態を更新するための予約をしています.約束を言いますsetState() は非同期です.呼ぶことsetState() あなたがそれを呼び出した後正確に更新されません.以下の例のコードを見てください.

import React, { Component } from 'react';

class App extends Component {

    state = { count : 0 }

    handleClick = () => {
        this.setState({count: this.state.count + 1 })
        this.setState({count: this.state.count + 1 })
        this.setState({count: this.state.count + 1 })
        console.log(this.state.count)
        // this.state.count logs 0 in the first click
        // this.state.count logs 1 after the second click
    }

    render() {
        return (
            <div>
                <button onClick={this.handleClick}>Add 3</button>
            </div>
        );
    }
}

export default App

ボタンをクリックした後、handleClick は、console.log しかし、実際には0となります.また、2回目のボタンをクリックしますconsole.log 1なぜこの出来事は?他の2を無視するかsetState() コール?そうではない.
反応を意図的に待つsetState() より良いパフォーマンスを要求します.この背後にある主要な理由は、コンポーネントの状態が変更されると、コンポーネントが応答して再レンダリングされるためです.これは重要です、ボタンのクリックを言うsetState() 子コンポーネントとsetState() 親コンポーネントの場合、子プロセスを2度再描画する必要はありません.あなたのアプリがより複雑になると、それは非常に高価であることができますし、順番にあなたのブラウザが無効になる原因があります.

prevstat ()
その非同期の性質を念頭に置いて、これはthis.state 頼りにならない.前の例に戻るsetState() コールはこれを見る.状態さえそれが更新される前に.現在の状態に依存する値を持つ状態を更新する場合function() インsetState() オブジェクトの代わりに.
コードを上から微調整し、下のコードを見てください.

import React, { Component } from 'react';

class App extends Component {

    state = { count : 0 }

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


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


        this.setState(prevState => {
            return {count: prevState.count + 1 }})
        console.log(this.state.count)
        // this.state.count logs 0 in the first click
        // this.state.count logs 3 after the second click
    }

    render() {
        return (
            <div>
                <button onClick={this.handleClick}>Add 3</button>
            </div>
        );
    }
}

export default App

ボタンをクリックするとconsole.log 0しかし、2回目と再び再構成するコンポーネントをクリックすると、それは3を記録します.既存の配列やオブジェクトを状態のままに更新している場合は、次のように拡張演算子を使用することもできます.

state = { arr : [{obj1}, {obj2}, {obj3}]  }

handleClick = () => {
    this.setState(prevState => {
      return {array: [...prevState.arr, {newObj}]}
    })
}

サイデステ

• The function above takes the the most updated this.state.arr
• Uses the ... spread operator to make a copy of that arr
• Adds a new object
• Updates state using setState()

オブジェクトの代わりに関数を使用する利点は、最も更新された状態へのアクセスを与え、setstate ()コールを順番に実行します.

callback ()
今、あなたは疑問に思っている、我々はまだ“0”私たちの最初のクリック後に取得している.
最後に、少なくとも、どのようにして後に更新された状態にアクセスしますかsetState() それは実際に何をすべきか?setState() コールバック関数を取ることができます.
以下の関数で最後の微調整を行います.

 state = { count : 0 }

    handleClick = () => {
        this.setState(prevState => {
            return {count: prevState.count + 3 }}, () => {
                console.log(this.state.count)
                // this.state.count logs 3
            })
            console.log(this.state.count)
            //this.state.count logs 0

    }

番目のコンソール.ログは、したがって、前に実行している範囲外ですsetState() 状態を設定する終了.
基本的にコールバック関数はsetState() したがって、このスコープで最も更新された状態へのアクセスを行います.

結論
私は、これが少しよりはっきりしたことを望みます.何かコメントやご提案があれば、ありがとうございます.