¿Cómo escuchar los cambios de estado en react.js?

143

¿Cuál es el equivalente de la función $ watch de angular en React.js?

Quiero escuchar los cambios de estado y llamar a una función como getSearchResults ().

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

Respuestas:

37

No he usado Angular, pero al leer el enlace de arriba, parece que estás tratando de codificar algo que no necesitas manejar. Realiza cambios de estado en su jerarquía de componentes React (a través de this.setState ()) y React hará que su componente se vuelva a representar (efectivamente 'escuchando' los cambios). Si desea 'escuchar' desde otro componente en su jerarquía, entonces tiene dos opciones:

  1. Pase los manejadores hacia abajo (a través de accesorios) desde un padre común y pídales que actualicen el estado del padre, haciendo que la jerarquía debajo del padre se vuelva a representar.
  2. Alternativamente, para evitar una explosión de controladores que caen en cascada en la jerarquía, debe observar el patrón de flujo , que mueve su estado a los almacenes de datos y permite que los componentes los observen en busca de cambios. El complemento Fluxxor es muy útil para gestionar esto.
edoloughlin
fuente
3
Pero, ¿qué pasa cuando necesita obtener datos remotos que usan (parte de) el estado como un parámetro url / a?
RnMss
@RnMss: mira redux y reductores ( redux.js.org/docs/basics/Reducers.html ) y también vuelve a seleccionar ( github.com/reactjs/reselect ).
edoloughlin
320

Se invocarán los siguientes métodos de ciclo de vida cuando cambie el estado. Puede usar los argumentos proporcionados y el estado actual para determinar si algo significativo cambió.

componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)
Derek Slager
fuente
55
Necesitaba activar un método cuando se actualizaba una propiedad en otro componente (subir uno mediante devolución de llamada, bajar uno mediante prop), y agregar componentDidUpdateel componente con el prop era la receta correcta. Gracias por esto.
Keith DC
Creo que esta es la mejor manera de garantizar la notificación de los cambios de estado, que es lo que solicitó el OP. Pero tenga en cuenta que ninguno de estos métodos se activará después de un cambio de estado si veta la actualización en shouldComponentUpdate.
MidnightJava
28
componentWillUpdateestá en desuso: reactjs.org/blog/2018/03/27/update-on-async-rendering.html
Dmitry Minkovsky
1
¿ componentDidUpdateno se disparará también cuando reciba nuevos accesorios, no necesariamente solo cuando cambie el estado?
andy mccullough
1
componentWillUpdatees obsoleto.
sean
29

Creo que debería usar el siguiente ciclo de vida del componente como si tuviera una propiedad de entrada que en la actualización necesita para activar la actualización de su componente, este es el mejor lugar para hacerlo, ya que se llamará antes de renderizar, incluso puede hacer que el estado del componente de actualización sea reflejado en la vista.

componentWillReceiveProps: function(nextProps) {
  this.setState({
    likesIncreasing: nextProps.likeCount > this.props.likeCount
  });
}
Hasain
fuente
66
componentWillReceiveProps ha quedado en desuso: reactjs.org/docs/…
John Skoumbourdis
14

Desde React 16.8 en 2019 con useState y useEffect Hooks, los siguientes ahora son equivalentes (en casos simples):

AngularJS:

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

<input ng-model="name" />

Reaccionar:

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

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

Usar useState con useEffect como se describió anteriormente es la forma absolutamente correcta. Pero si la función getSearchResults devuelve la suscripción, useEffect debería devolver una función que será responsable de cancelar la suscripción. La función devuelta de useEffect se ejecutará antes de cada cambio de dependencia (nombre en el caso anterior) y en la destrucción de componentes

Shivang Gupta
fuente
1

Ha pasado un tiempo, pero para referencia futura: se puede usar el método shouldComponentUpdate ().

Una actualización puede ser causada por cambios en los accesorios o el estado. Estos métodos se invocan en el siguiente orden cuando se vuelve a representar un componente:

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

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

Malvinka
fuente
Tendrá que devolver un valor booleano, por shouldComponentUpdatelo que podría no ser adecuado para este caso de uso.
sean