web-dev-qa-db-fra.com

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

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

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

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

Je n'ai pas utilisé Angular, mais en lisant le lien ci-dessus, il semble que vous essayiez de coder pour quelque chose que vous n'avez pas besoin de gérer. Vous apportez des modifications à l'état dans votre hiérarchie de composants React (via this.setState ()) et React provoquera le restitution de votre composant (ce qui permet d'écouter efficacement les modifications). Si vous souhaitez "écouter" un autre composant de votre hiérarchie, vous avez deux options:

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

Les méthodes du cycle de vie suivants seront appelés lorsque l'état changera. 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)
293
Derek Slager

Je pense que vous devriez utiliser Component Lifecycle ci-dessous, car si vous avez une propriété d'entrée dont la mise à jour a besoin pour déclencher la mise à jour de votre composant, c'est le meilleur endroit pour le faire. réfléchi sur la vue.

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

Depuis React 16.8 en 2019 avec les crochets seState et seEffect , les éléments 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)} />
2
Aprillion

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

Une mise à jour peut être provoqué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 rendu de nouveau:

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

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

1
Malvinka