Come ascoltare le modifiche di stato in react.js?

Question

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

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

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

Answer 1

Non ho usato angolare, ma leggendo il link qui sopra, sembra che si sta cercando di codificare per qualcosa che non c'è bisogno di gestire. Apportate le modifiche allo stato nella gerarchia dei componenti di React (tramite this.setState()) e React farà sì che il componente venga nuovamente sottoposto a rendering (in pratica "ascoltando" le modifiche). Se si vuole 'sentire' da un altro componente nella gerarchia allora si hanno due opzioni:

1. gestori di tramandare (via oggetti di scena) da un genitore comune e li hanno aggiornare lo stato del genitore, provocando la gerarchia di sotto della genitore da ridisegnare.
2. In alternativa, per evitare un'esplosione di gestori che ricadono lungo la gerarchia, è necessario esaminare flux pattern, che sposta lo stato in archivi dati e consente ai componenti di guardarli per eventuali modifiche. Il Fluxxor plugin è molto utile per la gestione di questo.

Answer 2

Il seguente lifecycle methods verrà chiamato quando le modifiche di stato. È 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) 

Answer 3

Penso che si dovrebbe utilizzare al di sotto dei componenti del ciclo di vita, come se si dispone di una proprietà di input che da aggiornamento ha bisogno per attivare l'aggiornamento dei componenti, allora questo è il posto migliore per farlo come si chiamerà prima di rendere ancora possibile aggiornare lo stato del componente per riflettere sulla vista.

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