[react]レコーダレス映画ネットワークサービス創作3.1 Stateのすべてwith setState


Previously...
  add = () => {console.log(add);};
  minus = () => {console.log(minus);};
ボタンを押すと、それぞれコンソールに記録できます.
どのようにボタンを押すとstateが起動し、数字が変化しますか?
TIL
  add = () => {
    this.state.count = 1;
  };
  minus = () => {
    this.state.count = -1;
  };
stateは直接書くからといって起動しません.
なぜならreactはrender()をリフレッシュしないからです.
stateの状態が変化するたびにreact加render関数を呼び出すことで変更したい.

コンソールからも「ステータスを直接変更しないでください」という警告が表示されます.setState()の使い方を親切に教えてくれました.
どうやって上と一緒にできるの?
reactはsetState()を呼び出すと
setStateが呼び出されるタイミングを知っています.
あなたが私に見せたいものを更新したいことも知っています.
render()をリフレッシュしたいのは知っています.
setState()を使用している場合にのみ、新しいステータスのrender()が呼び出されます.
  add = () => {
    this.setState({count: 1});
  };
  minus = () => {
    this.setState({count: -1});
  };
stateはobjectです.したがって、setStateは新しいstateを受け入れる必要があります.例では、{count:1}という新しいstateを受け入れます.

データは変化していますが、counte:1、count:-1の変化しか見えません.
setStateを呼び出すと、リアクターはstateをリフレッシュし、新しいstateとともにrender()を再び呼び出す.
今私がしなければならないのはcountを変えることです.
2つの関数をそれぞれこのように変えます.{count: this.state.count + 1} {count: this.state.count - 1}
フリーカウントの様子が見えます.
しかし、{count: this.state.count + 1}はここにあります.state.countはあまり良いコードではないと言っています.stateは、パフォーマンスの問題が後で発生するため、外部状態に依存します.
  add = () => {
    this.setState(current =>({count: current.count +1}));
  };
外部の状態に依存しない最善の方法だそうです.

n/a.結論


setStateが呼び出されるたびにreactは新しいstateとともにrender関数を呼び出します.