学習反応(1)-機能設定状態()

このシリーズでは,DO IT反応式プログラミングを学習する過程で遭遇した困難をまとめた.

setStateとは?

反応器には状態の概念,すなわち素子の状態を管理する.

class User extends Component{
	constructor(){
    	this.state = {posts:[],comments:[]}
    }
}

リアクターは、これらのステータスをステータスオブジェクトに直接アクセスして変更することを禁止します.どうやって修正すればいいですか?setStateメソッドを直接使用して変更できます.

class User extends Component{
	constructor(){
    	this.state = {posts:[],comments:[]}
    }
  
  	fetchComments().then(response => {
      this.setState({
        comments: response.comments
      });
    });
}

Functional setState?

setState()に新しいステータスオブジェクトを追加してパラメータで更新するのに慣れています.しかし学習の過程で理解できないコードが現れた.

onChange(name,updateValue){
	this.setState(({values}) => (
    	values:{
      		...values,
      		[name]:updatedValue
      	}
    ),() => this.validate(this.state.values))
}

突然、setStateのパラメータに関数があります.あと2つ...
検索するとsetStateもパラメータ受信関数として使用できることが分かった.

最初のパラメータ:stateとpropsをパラメータとして受け入れる関数

第2のパラメータ:第1の関数を処理した後に実行するコールバック関数

Why Functional setState?

これについていい文章が紹介されている.
原文を調べる
https://www.freecodecamp.org/news/functional-setstate-is-the-future-of-react-374f30401b6b/
オブジェクトを関数に入れるのではなくsetStateのパラメータを使用する理由を知るには、オブジェクトをパラメータとして入れると何が起こるかを知る必要があります.

setStateオブジェクトを既存の状態にマージします.

これに基づいてステータスを更新し、React Elementを再描画してレンダリングします.

これは状態を変えるだけでなく、DOMを再描画するため、かなりの作業です.setStateにオブジェクトを連続的に挿入して更新すると、どうなりますか?
ReactはDOMを3回更新しません.新しいオブジェクトを既存の状態にマージする場合、キーの値が同じ場合は、最近のオブジェクトのみが更新されます.

class User extends Component{
	constructor(){
    	this.state = {score:0}
    }
    update(){
		this.setState({score:this.state.score+1});
      	this.setState({score:this.state.score+1});
      	this.setState({score:this.state.score+1});
  	}
}

この結果のscoreは3のようですが、1になります.最後の最終結果しか反映されないからです.さらに悪いことに、setStateのこれらのプロセスは非同期で処理されます.非同期処理は、ステータス更新後の値を処理しにくくします.
ただし、関数をパラメータに入れると、反応器はそれをキューに入れて実行します.つまり、最後の値を処理するのではなく、順番に処理された値を次の関数に入れます.その結果、state更新後の値を処理できます.