Welche Methoden gibt es, um auf Zustandsänderungen zu reagieren?

Die Möglichkeiten, den Status in React zu ändern, sind: 1. Ändern Sie den Status über die Methode „this.setState({title:‘React‘});“ :preState .quantity+1)“-Methode zum Ändern des Status; 3. Ändern Sie den Status der Komponente über die „replaceState“-Methode.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 18.0.0, Dell G3-Computer.

Welche Methoden gibt es, um den Zustand in React zu ändern?

Den Zustand in React richtig ändern

Zuerst können wir in React den Zustand direkt über this.state.{property} abrufen , aber wenn wir den Status ändern möchten, gibt es viele Fallstricke. Die folgenden sind drei häufige Fallen:

Sie können den Status nicht direkt ändern.

Die Komponente ändert den Status direkt und löst das Rendern nicht erneut aus. Beispiel:

this.state.title='React';

Die richtige Änderungsmethode lautet:

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

Die Zustandsaktualisierung erfolgt asynchron

Wenn setState aufgerufen wird, ändert sich der Komponentenstatus nicht sofort, aber der zu ändernde Status wird in die Ereigniswarteschlange gestellt und React optimiert den tatsächlichen Ausführungszeitpunkt und aus eigenen Leistungsgründen können mehrere setState-Statusänderungen zu einer Statusänderung zusammengeführt werden. Verlassen Sie sich daher nicht auf den aktuellen Status, um den nächsten Status zu berechnen, denn wenn die Statusänderung tatsächlich durchgeführt wird, kann manchmal nicht garantiert werden, dass der abhängige this.state der neueste Status ist, da die Reaktion selbst dann mehrere Status zu einem zusammenführt Dies ist immer noch der alte Status, sodass Sie sich bei der Berechnung des nächsten Status nicht auf die aktuellen Requisiten verlassen können, da die Aktualisierung der Requisiten ebenfalls asynchron erfolgt. Beispiel: In den häufig verwendeten Reaktionsbeispielen gibt es eine Operation, bei der auf das Pluszeichen geklickt wird, um den Wert um eins zu erhöhen. Wenn Sie einmal auf + klicken, wird die Zahl um 1 erhöht. Wenn Sie zweimal hintereinander klicken, wird dies der Fall sein immer noch um 1 erhöhen. Dies ist, wenn die Reaktion zusammengeführt und auf einmal geändert wird, was der Ausführung des folgenden Codes entspricht:

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

Dann wird die vorherige Operation überschrieben und der Endwert wird nur um 1 erhöht. Sie können eine andere Funktion als Parameter verwenden: setState. Der erste Parameter ist diesmal der Zustand der Komponente vor der Änderung.

Der richtige Weg zum Ändern ist:

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

Statusaktualisierung ist ein Zusammenführungsprozess

Wenn Sie ssetState aufrufen, um den Status einer Komponente zu ändern, muss nur der geänderte Status übergeben werden, nicht der vollständige Status. weil die Komponente Die Aktualisierung des Status ist ein Zusammenführungsprozess. Der Status einer Komponente lautet beispielsweise:

this.state={

title:'React',

content:'React is an wondeful JS library'

}

Hinweis: Wenn Sie nur den Titel ändern müssen, übergeben Sie den geänderten Titel an setState:

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

react den neuesten zusammenführen Der Titel wird in seinen ursprünglichen Zustand zurückversetzt, während der Inhalt des ursprünglichen Zustands beibehalten wird:

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

Zweitens: Zustand und unveränderliche Objekte

React behandelt den Zustand offiziell als unveränderliches Objekt Einerseits werden this.state und die Komponenten nicht neu gerendert, andererseits sollten alle im Status enthaltenen Status unveränderliche Objekte sein neu erstellt werden, anstatt den ursprünglichen Status direkt zu ändern. Wie kann dann ein neuer Status erstellt werden? Wir können ihn je nach Statustyp in die folgenden drei Situationen unterteilen:

ein unveränderlicher Typ (Zahl, Zeichenfolge, Bool, Bulle, undefiniert)

Diese Situation ist die einfachste, da der Status ein unveränderlicher Typ ist, sodass Sie dem zu ändernden Status direkt einen neuen Wert zuweisen können. Wie unten gezeigt, Die Anzahl, die wir ändern möchten, ist vom Typ Nummer, Titel (Zeichenfolge), Erfolg (bool). Drei Zustände:

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

Der Zustandstyp ist Array.

Wenn es einen Array-Typ gibt, Zustandsbücher, wenn Sie Wenn Sie ein Buch zu Büchern hinzufügen möchten, können Sie die Concat-Methode des Arrays oder die ES6-Erweiterungssyntax (Aread-Syntax) verwenden

Methode eins: Verwenden Sie preState, concat, um ein neues Array zu erstellen

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

Methode zwei: ES6-Spread-Syntax

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

Wenn wir einige Elemente aus Büchern als neuen Zustand abfangen, können Sie die Slice-Methode des Arrays verwenden:

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

Wenn wir einige Elemente aus Büchern als neuen Zustand filtern, Sie Sie können die Filtermethode verwenden:

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

        return item != 'React';

        })
    })

Hinweis: Verwenden Sie nicht Push, Pop, Shift. Die Unshift- und Splice-Methoden ändern den Status des Array-Typs, da diese Methoden das ursprüngliche Array ändern, während Concat, Slice und Der Filter gibt ein neues Array zurück. ??

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视频教程》

Das obige ist der detaillierte Inhalt vonWelche Methoden gibt es, um auf Zustandsänderungen zu reagieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!