Come ascoltare i cambiamenti di stato in reazioni.js?

Qual è l' equivalente della funzione $ watch dell'angolare in React.js?

Voglio ascoltare i cambiamenti di stato e chiamare una funzione come getSearchResults ().

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

Non ho usato Angular, ma leggendo il link sopra, sembra che tu stia cercando di codificare qualcosa che non devi gestire. Apportate modifiche allo stato nella gerarchia dei componenti di React (tramite this.setState ()) e React provocherà il rendering del componente ("ascolto" effettivo delle modifiche). Se vuoi "ascoltare" da un altro componente nella tua gerarchia, hai due opzioni:

1. Passare i gestori verso il basso (tramite oggetti di scena) da un genitore comune e fare in modo che aggiornino lo stato del genitore, causando il rendering della gerarchia sotto il genitore.
2. In alternativa, per evitare un'esplosione di gestori che scendono a cascata lungo la gerarchia, è necessario esaminare il modello di flusso , che sposta il proprio stato negli archivi dati e consente ai componenti di osservarli per le modifiche. Il plug-in Fluxxor è molto utile per gestirlo .

I seguenti metodi del ciclo di vita verranno chiamati quando lo stato cambia. È possibile utilizzare gli argomenti forniti e lo stato corrente per determinare se qualcosa di significativo è cambiato.

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

Penso che dovresti usare il Ciclo di vita dei componenti sotto come se avessi una proprietà di input che all'aggiornamento deve attivare l'aggiornamento del componente, questo è il posto migliore per farlo come verrà chiamato prima che venga visualizzato, puoi anche fare lo stato del componente di aggiornamento per essere riflesso sulla vista.

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

Da React 16.8 nel 2019 con useState e useEffect Hooks, i seguenti sono ora equivalenti (in casi semplici):

AngularJS:

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

<input ng-model="name" />

Reagire:

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

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

L'uso di useState con useEffect come descritto sopra è assolutamente corretto. Ma se la funzione getSearchResults restituisce l'abbonamento, useEffect dovrebbe restituire una funzione che sarà responsabile dell'annullamento dell'iscrizione. La funzione restituita da useEffect verrà eseguita prima di ogni modifica alla dipendenza (nome nel caso precedente) e alla distruzione del componente

È passato un po 'di tempo, ma per riferimento futuro: è possibile utilizzare il metodoCompCompententUpdate ().

Un aggiornamento può essere causato da modifiche agli oggetti di scena o allo stato. Questi metodi vengono chiamati nel seguente ordine quando viene eseguito il rendering di un componente:

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

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