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

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();
}

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.

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)

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
  });
}

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)} />

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

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