Quelles sont les méthodes de réaction au changement d'état ?

Premièrement, en réaction, on peut directement obtenir l'état via this.state.{propriété} , mais quand nous Il y a de nombreux pièges auxquels vous devez faire attention lorsque vous souhaitez modifier l'état Voici trois pièges courants :

Vous ne pouvez pas modifier l'état directement.

Le composant modifie directement l'état et ne redéclenche pas le rendu. Par exemple :

this.state.title='React';

La méthode de modification correcte est :

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

la mise à jour de l'état est asynchrone

Lorsque setState est appelé, l'état du composant ne change pas immédiatement, mais l'état à modifier est placé dans la file d'attente des événements, et React optimise le timing d'exécution réel et, pour ses propres raisons de performances, plusieurs modifications d'état setState peuvent être fusionnées en une seule modification d'état. Par conséquent, ne vous fiez pas à l'état actuel pour calculer l'état suivant, car lorsque la modification de l'état est réellement effectuée, parfois le this.state dépendant n'est pas garanti comme étant le dernier état, car la réaction elle-même fusionnera plusieurs états en un seul, puis this. L'état est toujours l'ancien état, vous ne pouvez donc pas compter sur les accessoires actuels pour calculer l'état suivant, car la mise à jour des accessoires est également asynchrone. Par exemple : dans les exemples de réaction couramment utilisés, il y a une opération consistant à cliquer sur le signe plus pour augmenter la valeur de un. Si vous cliquez une fois sur +, le nombre augmentera de 1. Si vous cliquez deux fois de suite, ce sera le cas. augmente toujours de 1. C'est à ce moment-là que réagir est fusionné et modifié en une fois , ce qui équivaut à exécuter le code suivant :

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

Donc, l'opération précédente est écrasée et la valeur finale n'ajoute que 1. À ce stade, vous pouvez utilisez une autre fonction comme paramètre, setState. Cette fonction a deux paramètres. Le premier paramètre est cette fois l'état du composant avant modification.

La bonne façon de modifier est :

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

la mise à jour de l'état est un processus de fusion

Lors de l'appel de ssetState pour modifier l'état d'un composant, seul l'état modifié doit être transmis, pas l'état complet, car le composant La mise à jour de l'état est un processus de fusion. Par exemple, le statut d'un composant est :

this.state={

title:'React',

content:'React is an wondeful JS library'

}

Remarque : Lorsque vous n'avez besoin que de modifier le titre, transmettez le titre modifié à setState :

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

react le fera. fusionner le dernier Le titre revient à son état d'origine, tandis que le contenu de l'état d'origine est conservé L'état final fusionné est :

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

Deuxièmement, l'état et les objets immuables

React traite officiellement l'état comme un objet immuable. . D'une part, il modifie directement cet état et ses composants. D'autre part, tous les états contenus dans l'état doivent être des objets immuables. Lorsqu'un état dans l'état change, l'objet d'état doit être modifié. être recréé au lieu de modifier directement l'état d'origine. , alors lorsque l'état change, comment créer un nouvel état ? On peut le diviser en trois situations suivantes selon le type d'état :

Le type d'état est un type immuable (nombre, chaîne, booléen, taureau, indéfini)

Cette situation est la plus simple, car l'état est un type immuable, vous pouvez donc directement attribuer une nouvelle valeur à l'état à modifier comme indiqué ci-dessous, le décompte que nous voulons modifier est de type nombre, titre (chaîne), succès (bool) Trois états :

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

Le type d'état est un tableau

S'il existe un livre d'état de type tableau, lorsque vous Si vous souhaitez ajouter un livre aux livres, vous pouvez utiliser la méthode concat du tableau ou la syntaxe d'extension es6 (syntaxe apread)

Première méthode : utilisez preState, concat pour créer un nouveau tableau

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

Méthode deux : Syntaxe de propagation ES6

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

Lorsque nous interceptons certains éléments des livres en tant que nouvel état, vous pouvez utiliser la méthode slice du tableau :

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

Lors du filtrage de certains éléments des livres en tant que nouvel état, vous peut utiliser la méthode de filtrage :

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

        return item != 'React';

        })
    })

Remarque : N'utilisez pas push, pop, shift. Les méthodes unshift et splice modifient l'état du type de tableau car ces méthodes modifient le tableau d'origine, tandis que concat, slice et filter renverra un nouveau tableau.

Méthode 3 : Le type d'état est un objet ordinaire (à l'exclusion de : chaîne, tableau)

Utilisez la méthode Object.assgin() d'es6

this.setState({

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

})

Utilisez les propriétés de répartition de l'objet :

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
}