Le meilleur didacticiel Réagir API Component en 2024, dans ce didacticiel, vous pouvez apprendre Set Status: setState,Remplacer Statut: replaceState,Définition des propriétés: SetProps,Remplacer l'attribut: replaceProps,Mise à jour: forceUpdate,Obtenez Node DOM: findDOMNode,L'analyse des composants état monté: isMounted,
Dans cette section, nous allons discuter Réagir API du composant. Nous allons expliquer les sept méthodes suivantes:
setState(object nextState[, function callback])
Fusionner nextstate et l'état actuel, et le composant de re-rendu. setState sont Réagir méthode de gestionnaire d'événement et demander des principales fonctions de rappel de mise à jour de l'interface utilisateur déclenchée.
Vous ne pouvez pas modifier les composants internes en this.state état, parce que l'État remplacera l'appel setState () après.
setState () ne change pas this.state immédiatement, mais va bientôt créer un traitement de l'Etat. setState () ne sont pas nécessairement synchronisées afin d'améliorer la performance réagirait état d'exécution des lots et DOM rendu.
setState () déclenche toujours un ensemble de rafraîchissement, à moins qu'un certain nombre de conditions pour atteindre shouldComponentUpdate () en rendant la logique.
var Counter = React.createClass({ getInitialState: function () { return { clickCount: 0 }; }, handleClick: function () { this.setState(function(state) { return {clickCount: state.clickCount + 1}; }); }, render: function () { return (<h2 onClick={this.handleClick}>点我!点击次数为: {this.state.clickCount}</h2>); } }); ReactDOM.render( <Counter />, document.getElementById('message') );
Des exemples en cliquant sur les balises h2 pour faire un compteur de visites est incrémenté.
replaceState(object nextState[, function callback])
méthode replaceState () setState () est similaire, mais la seule méthode conservé état NEXTSTATE, l'état d' origine ne sont pas le statut nextstate sera supprimé.
setProps(object nextProps[, function callback])
Définition des propriétés des composants, et le composant re-rendu.
flux de données props composants équivalents, il sera toujours transmis de parent à tous les composants de sous-ensembles. Quand un JavaScript externe et l' intégration d'applications, nous pouvons avoir besoin de transmettre des données à la composante ou de l' avis React.render () composants doivent re-rendre, vous pouvez utiliser SetProps ().
Mise à jour React.render composante je peux appeler à nouveau sur le nœud () pour être méthode pour modifier les propriétés du composant par SetProps (), déclencheur composant re-rendu.
replaceProps(object nextProps[, function callback])
replaceProps () méthode est SetProps similaires, mais il supprimera l'original
props
forceUpdate([function callback])
forceUpdate () méthode provoque le composant qui appelle lui-même rendu () pour re-rendre le composant sous-ensemble, le composant va appeler votre propre render (). Cependant, lorsque l'ensemble re-rendu, et lit encore this.props this.state, si l'état ne change pas, alors réagir seulement mis à jour DOM.
forceUpdate () méthode est adaptée pour this.props extérieur et redessiner this.state composants (tels que: modifications this.state après), notifiée par la méthode Réagir appelez render ()
En général, vous devriez éviter d'utiliser forceUpdate (), et en lecture seule this.props et this.state état déclenché par React render () appelle.
DOMElement findDOMNode()
Si le composant a été monté sur le DOM, la méthode renvoie les éléments DOM navigateur locaux correspondants. Lorsque rendre return null ou false quand, this.findDOMNode () retourne null. Lire à partir de la valeur DOM, cette approche est utile, par exemple: Obtient la valeur du champ de formulaire et faire quelques manipulations DOM.
bool isMounted()
Procédé isMounted () est utilisée pour déterminer si les composants sont montés sur le DOM. Vous pouvez utiliser cette méthode pour faire en sorte que l'appel setState () et forceUpdate () dans le scénario asynchrone ne peut pas aller mal.
Ici par référence: http: //itbilu.com/javascript/react/EkACBdqKe