Jak odsłuchiwać zmiany stanu w respond.js?

Jaki jest odpowiednik funkcji $ watch kątowej w React.js?

Chcę słuchać zmian stanu i wywołać funkcję, taką jak getSearchResults ().

componentDidMount: function() {
    this.getSearchResults();
}

Nie korzystałem z Angulara, ale czytając powyższy link, wydaje się, że próbujesz zakodować coś, z czym nie musisz sobie radzić. Dokonujesz zmian stanu w swojej hierarchii komponentów React (poprzez this.setState ()), a React spowoduje ponowne renderowanie twojego komponentu (efektywnie „nasłuchując” zmian). Jeśli chcesz „słuchać” innego komponentu w swojej hierarchii, masz dwie możliwości:

1. Funkcje obsługi przekazu w dół (przez właściwości) ze wspólnego rodzica i każą im aktualizować stan rodzica, powodując ponowne renderowanie hierarchii poniżej rodzica.
2. Alternatywnie, aby uniknąć eksplozji procedur obsługi, które spadają kaskadowo w dół hierarchii, należy przyjrzeć się wzorowi przepływu , który przenosi stan do magazynów danych i umożliwia komponentom obserwowanie ich pod kątem zmian. Wtyczki Fluxxor jest bardzo przydatna do zarządzania tym.

Następujące metody cyklu życia zostaną wywołane w przypadku zmiany stanu. Możesz użyć dostarczonych argumentów i bieżącego stanu, aby określić, czy coś istotnego się zmieniło.

componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)

Myślę, że powinieneś używać poniższego cyklu życia komponentu, tak jakbyś miał właściwość wejściową, która podczas aktualizacji musi wyzwolić aktualizację komponentu, jest to najlepsze miejsce do zrobienia tego, ponieważ zostanie wywołane przed renderowaniem, możesz nawet zaktualizować stan komponentu, aby był odzwierciedlone w widoku.

componentWillReceiveProps: function(nextProps) {
  this.setState({
    likesIncreasing: nextProps.likeCount > this.props.likeCount
  });
}

Od czasu React 16.8 w 2019 roku z użyciem hooków useState i useEffect , poniższe są teraz równoważne (w prostych przypadkach):

AngularJS:

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

<input ng-model="name" />

Reagować:

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

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

Używanie useState z useEffect, jak opisano powyżej, jest całkowicie poprawne. Ale jeśli funkcja getSearchResults zwraca subskrypcję, useEffect powinien zwrócić funkcję, która będzie odpowiedzialna za anulowanie subskrypcji. Zwracana funkcja z useEffect będzie działać przed każdą zmianą zależności (nazwa w powyższym przypadku) i zniszczeniem komponentu

Minęło trochę czasu, ale do wykorzystania w przyszłości: można użyć metody shouldComponentUpdate ().

Aktualizacja może być spowodowana zmianami właściwości lub stanu. Te metody są wywoływane w następującej kolejności, gdy składnik jest ponownie renderowany:

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

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