210322開発ログ(105日目)-反応状態を正しく使用

Reactのクラスでstateを使用する場合は、次の3点に注意してください。

のステータス値を直接変更することはできません.(setState関数を使用)

州の更新は非同期です.

州の更新は合併しますか?(state変数が複数ある場合は個別に更新可能)

1.ステータス値を直接変更することはできません。(setState関数を使用)

stateを変更すると、変更値が反映されますが、構成部品は再レンダリングされません.つまり、これは正しい使い方ではありません.

// Wrong
this.state.comment = 'Hello';

逆にsetState()関数を使用します.

// Correct
this.setState({comment: 'Hello'});

2.ステータス更新は非同期です。

setState()を使用する場合、この関数はすぐに値を更新しなくてもよい.△どうして前の任務がこんなに重いのですか.
そのため、下図のように予期せぬ値が出る場合があります.

// Wrong
this.setState({
  counter: this.state.counter + this.props.increment,
});

したがって、以下に示すように、必要な時点の値を正しく受け入れるには、パラメータとして関数を使用する必要があります.

// Correct
this.setState((state, props) => ({
  counter: state.counter + props.increment
}));

3.stateの更新マージ?(stateに複数の変数がある場合は、個別に更新できます)

下図に示すように、stateには複数の独立変数があります.また、これらの状態の変数を個別に更新することもできます.

constructor(props) {
    super(props);
    this.state = {
      posts: [],
      comments: []
    };
  }

上記の状態が存在する場合、各状態の変数は、以下のように個別のsetState()関数を用いて独立して更新することができる.

  componentDidMount() {
    fetchPosts().then(response => {
      this.setState({
        posts: response.posts
      });
    });

    fetchComments().then(response => {
      this.setState({
        comments: response.comments
      });
    });
  }

ソース:React公式ページ