Comment écouter les changements d'état dans react.js?

Quel est l' équivalent de la fonction $ watch angulaire dans React.js?

Je veux écouter les changements d'état et appeler une fonction comme getSearchResults ().

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

Je n'ai pas utilisé Angular, mais en lisant le lien ci-dessus, il semble que vous essayez de coder pour quelque chose que vous n'avez pas besoin de gérer. Vous apportez des modifications à l'état dans la hiérarchie de vos composants React (via this.setState ()) et React provoquera le nouveau rendu de votre composant (effectivement en «écoutant» les modifications). Si vous souhaitez `` écouter '' un autre composant de votre hiérarchie, vous avez deux options:

1. Transmettez les gestionnaires (via des accessoires) d'un parent commun et demandez-leur de mettre à jour l'état du parent, ce qui entraîne le re-rendu de la hiérarchie sous le parent.
2. Sinon, pour éviter une explosion de gestionnaires en cascade dans la hiérarchie, vous devez examiner le modèle de flux , qui déplace votre état dans les magasins de données et permet aux composants de les surveiller pour les changements. Le plugin Fluxxor est très utile pour gérer cela.

Les méthodes de cycle de vie suivantes seront appelées lorsque l'état change. Vous pouvez utiliser les arguments fournis et l'état actuel pour déterminer si quelque chose de significatif a changé.

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

Je pense que vous devriez utiliser ci-dessous le cycle de vie des composants comme si vous aviez une propriété d'entrée qui, lors de la mise à jour, doit déclencher la mise à jour de votre composant, alors c'est le meilleur endroit pour le faire car il sera appelé avant le rendu, vous pouvez même mettre à jour l'état du composant pour être réfléchi sur la vue.

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

Depuis React 16.8 en 2019 avec useState et useEffect Hooks, les suivants sont désormais équivalents (dans des cas simples):

AngularJS:

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

<input ng-model="name" />

Réagir:

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

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

Utiliser useState avec useEffect comme décrit ci-dessus est une manière absolument correcte. Mais si la fonction getSearchResults renvoie un abonnement, useEffect doit renvoyer une fonction qui sera responsable de la désinscription de l'abonnement. La fonction retournée par useEffect s'exécutera avant chaque changement de dépendance (nom dans le cas ci-dessus) et lors de la destruction du composant

Cela fait un moment mais pour référence future: la méthode shouldComponentUpdate () peut être utilisée.

Une mise à jour peut être causée par des modifications apportées aux accessoires ou à l'état. Ces méthodes sont appelées dans l'ordre suivant lorsqu'un composant est en cours de rendu:

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

réf: https://reactjs.org/docs/react-component.html