Wie kann man Statusänderungen in react.js abhören?

142

Was entspricht der $ watch- Funktion des Winkels in React.js?

Ich möchte Statusänderungen abhören und eine Funktion wie getSearchResults () aufrufen.

componentDidMount: function() {
    this.getSearchResults();
}
Eniz Gülek
quelle

Antworten:

36

Ich habe Angular nicht verwendet, aber wenn Sie den obigen Link lesen, scheinen Sie zu versuchen, für etwas zu codieren, das Sie nicht bearbeiten müssen. Sie nehmen Änderungen am Status in Ihrer React-Komponentenhierarchie vor (über this.setState ()) und React bewirkt, dass Ihre Komponente neu gerendert wird (und zwar effektiv auf Änderungen wartet). Wenn Sie von einer anderen Komponente in Ihrer Hierarchie aus zuhören möchten, haben Sie zwei Möglichkeiten:

  1. Übergeben Sie Handler (über Requisiten) von einem gemeinsamen Elternteil und lassen Sie sie den Status des Elternteils aktualisieren, wodurch die Hierarchie unter dem Elternteil neu gerendert wird.
  2. Um eine Explosion von Handlern zu vermeiden, die in der Hierarchie kaskadieren, sollten Sie alternativ das Flussmuster betrachten , das Ihren Status in Datenspeicher verschiebt und es Komponenten ermöglicht, diese auf Änderungen zu überwachen. Das Fluxxor-Plugin ist sehr nützlich, um dies zu verwalten.
Edoloughlin
quelle
3
Aber was ist, wenn Sie entfernte Daten abrufen müssen, die (einen Teil) des Status als URL / Parameter verwenden?
RnMss
@RnMss - Sehen Sie sich Redux und Reduzierungen an ( redux.js.org/docs/basics/Reducers.html ) und wählen Sie sie erneut aus ( github.com/reactjs/reselect ).
Edoloughlin
319

Die folgenden Lebenszyklusmethoden werden aufgerufen, wenn sich der Status ändert. Sie können die angegebenen Argumente und den aktuellen Status verwenden, um festzustellen, ob sich etwas Sinnvolles geändert hat.

componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)
Derek Slager
quelle
5
Musste eine Methode auslösen, wenn eine Eigenschaft in einer anderen Komponente aktualisiert wurde (eine über Rückruf, eine über Requisite), und das Hinzufügen componentDidUpdateder Komponente mit der Requisite war das richtige Rezept. Danke dafür.
Keith DC
Ich denke, dies ist der beste Weg, um die Benachrichtigung über Zustandsänderungen zu gewährleisten, wie es das OP gefordert hat. Beachten Sie jedoch, dass keine dieser Methoden nach einer Statusänderung ausgelöst wird, wenn Sie gegen das Update in shouldComponentUpdate ein Veto einlegen.
MidnightJava
28
componentWillUpdatewird veraltet: reactjs.org/blog/2018/03/27/update-on-async-rendering.html
Dmitry
1
Wird componentDidUpdatenicht auch ausgelöst, wenn neue Requisiten empfangen werden, nicht unbedingt nur, wenn sich der Status ändert?
Andy McCullough
1
componentWillUpdateist veraltet.
Sean
29

Ich denke, Sie sollten den folgenden Komponentenlebenszyklus verwenden, als ob Sie eine Eingabeeigenschaft haben, die beim Update Ihr Komponentenupdate auslösen muss. Dies ist der beste Ort, um dies zu tun, da es vor dem Rendern aufgerufen wird. Sie können sogar den Komponentenstatus aktualisieren über die Ansicht reflektiert.

componentWillReceiveProps: function(nextProps) {
  this.setState({
    likesIncreasing: nextProps.likeCount > this.props.likeCount
  });
}
hasain
quelle
6
componentWillReceiveProps ist veraltet: reactjs.org/docs/…
John Skoumbourdis
14

Seit React 16.8 im Jahr 2019 mit useState und useEffect Hooks sind folgende (in einfachen Fällen) gleichwertig:

AngularJS:

$scope.name = 'misko'
$scope.$watch('name', getSearchResults)

<input ng-model="name" />

Reagieren:

const [name, setName] = useState('misko')
useEffect(getSearchResults, [name])

<input value={name} onChange={e => setName(e.target.value)} />
Aprillion
quelle
2

Die Verwendung von useState mit useEffect wie oben beschrieben ist absolut korrekt. Wenn die Funktion getSearchResults jedoch ein Abonnement zurückgibt, sollte useEffect eine Funktion zurückgeben, die für das Abbestellen des Abonnements verantwortlich ist. Die von useEffect zurückgegebene Funktion wird vor jeder Änderung der Abhängigkeit (Name im obigen Fall) und bei der Zerstörung der Komponente ausgeführt

Shivang Gupta
quelle
1

Es ist eine Weile her, aber als zukünftige Referenz: Die Methode shouldComponentUpdate () kann verwendet werden.

Ein Update kann durch Änderungen an Requisiten oder Status verursacht werden. Diese Methoden werden in der folgenden Reihenfolge aufgerufen, wenn eine Komponente erneut gerendert wird:

static getDerivedStateFromProps() 
shouldComponentUpdate() 
render()
getSnapshotBeforeUpdate() 
componentDidUpdate()

ref: https://reactjs.org/docs/react-component.html

Malvinka
quelle
Sie müssen einen Booleschen Wert von zurückgeben, shouldComponentUpdatedamit er möglicherweise nicht für diesen Anwendungsfall geeignet ist.
Sean