Réagir API Component

Dans cette section, nous allons discuter Réagir API du composant. Nous allons expliquer les sept méthodes suivantes:

• Set Status: setState
• Remplacer Statut: replaceState
• Définition des propriétés SetProps
• Remplacer replaceProps de propriété
• Mise à jour: forceUpdate
• Obtenez Node DOM: findDOMNode
• L'analyse des composants état monté: isMounted

Set Status: setState

setState(object nextState[, function callback])

Paramètre description

• NEXTSTATE, le nouvel état à régler, le statut et la fusion de l' état actuel
• rappel, les paramètres facultatifs, la fonction de rappel. Cette fonction sera assurée en succès setState Appelé après l'assemblée re-rendu.

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.

A propos de setState

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.

Exemples

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')
);

Essayez »

Des exemples en cliquant sur les balises h2 pour faire un compteur de visites est incrémenté.

Remplacer Statut: replaceState

replaceState(object nextState[, function callback])

• NEXTSTATE, le nouvel état sera mis en place, qui remplacera l'état actuel de l'Etat.
• rappel, les paramètres facultatifs, la fonction de rappel. Cette fonction sera assurée en replaceState réussie Appelé après l'assemblée re-rendu.

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é.

Définition des propriétés: SetProps

setProps(object nextProps[, function callback])

• nextProps, la nouvelle propriété sera définie, et l'état actuel des accessoires de fusion
• rappel, les paramètres facultatifs, la fonction de rappel. Cette fonction sera assurée en SetProps réussi appelé après l'assemblage re-rendu.

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.

Remplacer l'attribut: replaceProps

replaceProps(object nextProps[, function callback])

• nextProps, la nouvelle propriété à définir, cette propriété remplacera les accessoires actuels.
• rappel, les paramètres facultatifs, la fonction de rappel. Cette fonction sera assurée en replaceProps réussi appelé après l'assemblage re-rendu.

replaceProps () méthode est SetProps similaires, mais il supprimera l'original

props

Mise à jour: forceUpdate

forceUpdate([function callback])

Paramètre description

• rappel, les paramètres facultatifs, la fonction de rappel. Cette fonction sera appelée après que le composant méthode render () appel.

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.

Obtenez Node DOM: findDOMNode

DOMElement findDOMNode()

• Valeur de retour: DOM élément DOMElement

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.

L'analyse des composants état monté: isMounted

bool isMounted()

• Valeur de retour: vrai ou faux, ce qui indique si le composant est monté sur le DOM

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.html