状態の変更に反応するメソッドは何ですか?

反応して状態を変更するメソッドは次のとおりです: 1. 「this.setState({title:'React'});」メソッドを通じて状態を変更します; 2. 「this.setState((preState, props) を通じて」 => ;counter:preState.quantity 1)" メソッドで状態を変更します。 3. "replaceState" メソッドでコンポーネントの状態を変更します。

このチュートリアルの動作環境: Windows 10 システム、react18.0.0 バージョン、Dell G3 コンピューター。

react で状態を変更する方法は何ですか?

react で状態を正しく変更する

まず、react では this.state.{property} を通じて直接状態を取得できますが、状態を変更したい場合には注意が必要な落とし穴がたくさんあります。 #一般的なトラップは次の 3 つです:

状態を直接変更することはできません。

コンポーネントは状態を直接変更し、レンダリングを再トリガーしません。例:

this.state.title='React';

正しい変更方法は次のとおりです:

this.setState({title:'React'});

状態の更新は非同期です

setState が呼び出されると、コンポーネントの状態は次のようになります。すぐには更新されませんが、変更される状態をイベント キューに入れ、react は実際の実行タイミングを最適化します。また、独自のパフォーマンス上の理由から、複数の setState 状態変更が 1 つの状態変更にマージされる場合があります。したがって、現在の状態に依存して次の状態を計算しないでください。状態の変更が実際に実行されるとき、依存する this.state が最新の状態であることが保証されない場合があります。反応自体が複数の状態を 1 つにマージするためです。状態はまだ古い状態のままであるため、プロパティの更新も非同期であるため、現在のプロパティに依存して次の状態を計算することはできません。例えば、よく使われるreactの例では、プラス記号をクリックして値を1つ増やす操作があり、1回クリックすると数値が1増加し、2回連続でクリックすると数値が増加します。これは、react がマージされ、one に変更されるときです。これは、次のコードを実行するのと同じです:

Object.assign(
previousState,
{quantity:this.state.quantity+1},
{quantity:this.state.quantity+1},
)

その後、前の操作は上書きされ、最終的な値は 1 だけ増加しますこのとき、別の関数 setState をパラメータとして使用できます。この関数には 2 つのパラメータがあり、最初のパラメータは変更前のコンポーネントの状態、2 番目のパラメータは最新の props です。

正しい変更方法は次のとおりです:

this.setState((preState, props)=>counter:preState.quantity+1)

状態の更新はマージ プロセスです

コンポーネントを変更するために ssetState を呼び出すときコンポーネントの状態の更新はマージプロセスであるため、状態に入るときは、完全な状態ではなく、変更された状態だけを渡す必要があります。たとえば、コンポーネントの状態は次のようになります:

this.state={

title:'React',

content:'React is an wondeful JS library'

}

注: タイトルを変更するときのみ、変更したタイトルを setState に渡すだけです:

this.setState({title:'ReactJs'});

react は、元の状態の内容を保持したまま、最新のタイトルを元の状態にマージします。マージされた状態は:

this.state={
title:'ReactJs,
content:''React is an wondeful Js library
}

2. 状態と不変オブジェクト

React は公式に状態を不変オブジェクトとして扱います。コンポーネントは再レンダリングされません; 一方、状態に含まれるすべての状態は不変オブジェクトである必要があります。状態内の状態が変更された場合、元の状態を直接変更するのではなく、状態オブジェクトを再作成する必要があります。状態が変化するとき 新しい状態をいつ、どのように作成するか 状態のタイプに応じて、次の 3 つの状況に分けることができます:

状態のタイプは不変型です。 (数値、文字列、ブール、ブル、未定義)

状態が不変型であるため、この状況は最も単純で、変更する状態に新しい値を割り当てるだけです。 、変更したいカウントは数値です。タイプ、タイトル (文字列)、成功 (ブール値) の 3 つの状態:

this.setState({
count:1,
title:'React',
success:true
})

ステータスのタイプは次のとおりです。配列

ステートブックの配列型がある場合、ブックにブックを追加したい場合は、配列の concat メソッドまたは es6 の拡張構文 (apread 構文) を使用できます。

方法 1: preState、concat を使用して新しい配列を作成する

 this.setState((preState)=>books:preState.books.concat(['React Guide']))

方法 2: ES6 スプレッド構文

this.setState(preState=>books:[...preState,''React Guide])

本から読むとき いくつかの要素を新しい状態としてインターセプトするときは、配列のスライス メソッドを使用できます。

this.setState(preState=>books:preState.books.slice(1,3))

書籍から一部の要素をフィルターして新しい状態として使用する場合、フィルター メソッドを使用できます:

 this.setState(preState => {
        books: preState.books.filter(item => {

        return item != 'React';

        })
    })

注: 使用しないでください。配列タイプのステータスを変更するには、push、pop、shift、unshift、splice メソッドを使用します。これらのメソッドはすべて元の配列内にあるため、concat、slice、filter に基づいて変更すると、新しい配列が返されます。

方法 3: 状態のタイプは通常のオブジェクトです (文字列、配列を除く)

Object.assgin() メソッドを使用します。 es6 の

this.setState({

onwer:Object.assgin({},preState.onwer,{name:'Jason'});

})

オブジェクト スプレッド プロパティを使用する:

this.setState(preState=>{
owner:{...preState.owner,name:'Jason'}
})

 

总结：

创建新的状态的关键是，避免使用会直接修改原对象的方法而是使用可以返回一个新对象的方法，当然可以使用Immutable的JS库（Immutable.js）实现类似的效果。

 

思考：

为什么React推荐组件状态的修改时不可变对象呢？

1. 不可变对象的修改会返回一个新的对象，不用担心原对象在不小心的情况下修改导致的错误，方便程序的管理和调试
2. 处于性能的考虑，对象组件的状态是不可变对象时，在组件的shouldComponentUpdate方法中仅需要比较前后两次状态对象的引用就可以判断状态是否真的改变，从而避免不必要的render调用

三：除了以上方法修改react组件的状态之外，我们还经常会用到replaceState改变组件的状态

 

replaceState()方法与setState()类似，但是方法只会保留nextState中状态，原state不在nextState中的状态都会被删除。使用语法：

replaceState(object nextState,[, function callback])

nextState，将要设置的新状态，该状态会替换当前的state。

callback，可选参数，回调函数。该函数会在replaceState设置成功，且组件重新渲染后调用。

如：

 class App extends React.Component{

     constructor(props);

      this.state={

      count:1

      title:'数字计算'

      }

}

handleClick=()=>{

  this.replaceState({

    count:this.state.count+1

  })

}

render(){
    return(
      <button onClick={this.onClick}>点我</button>
      )
  }

}

 

结果为：

 

{
count：1
}

推荐学习：《react视频教程》

以上が状態の変更に反応するメソッドは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。