API du composant React
Dans ce chapitre, nous aborderons l'API du composant React. Nous expliquerons les 7 méthodes suivantes :
Définir l'état : setState
Remplacer l'état : replaceState
Définissez l'attribut setProps
Remplacez l'attribut replaceProps
Forcer la mise à jour : forceUpdate
Obtenez le nœud DOM : findDOMNode
Déterminez l'état de montage du composant : isMounted
Définissez l'état : setState
setState(object nextState[, function callback])
Paramètre description
nextState, le nouvel état à définir, qui sera fusionné avec l'état
<🎜 actuel >callback, paramètre facultatif, fonction de rappel. Cette fonction sera appelée une fois que setState sera défini avec succès et que le composant sera restitué.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>php中文网 React 实例</title>
<script src="http://static.php.cn/assets/react/react-0.14.7/build/react.js"></script>
<script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.js"></script>
<script src="http://static.php.cn/assets/react/browser.min.js"></script>
</head>
<body>
<div id="message" align="center"></div>
<script type="text/babel">
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')
);
</script>
</body>
</html>Exécuter l'instance »Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Dans l'exemple, cliquer sur la balise h2 augmente le compteur de clics de 1.
Remplacer l'état : replaceState
replaceState(object nextState[, function callback])
nextState, le nouvel état à définir, qui remplacera l'actuel état .
rappel, paramètre facultatif, fonction de rappel. Cette fonction sera appelée une fois que replaceState sera défini avec succès et que le composant sera restitué. La méthode
replaceState() est similaire à setState(), mais la méthode ne conservera que l'état dans nextState. L'état d'origine sera supprimé s'il n'est pas dans nextState.
Définir les propriétés : setProps
setProps(object nextProps[, function callback])
nextProps, l'état des nouvelles propriétés à définir sera le même que celui actuel accessoires Fusion
rappel, paramètres facultatifs, fonction de rappel. Cette fonction sera appelée une fois que setProps sera défini avec succès et que le composant sera restitué.
Définissez les propriétés du composant et effectuez un nouveau rendu du composant.
props équivaut au flux de données du composant, qui est toujours transmis du composant parent à tous les composants enfants. Lors de l'intégration avec une application JavaScript externe, nous devrons peut-être transmettre des données au composant ou informer le composant React.render() qu'il doit être restitué. Vous pouvez utiliser setProps(). .
Pour mettre à jour le composant, je peux appeler React.render() à nouveau sur le nœud, ou je peux modifier les propriétés du composant via la méthode setProps() pour déclencher le rendu du composant.
Remplacer les propriétés : replaceProps
replaceProps(object nextProps[, function callback])
nextProps, la nouvelle propriété à définir, qui remplacera les props actuels .
callback, paramètre facultatif, fonction de rappel. Cette fonction sera appelée une fois que replaceProps sera défini avec succès et que le composant sera restitué. La méthode
replaceProps() est similaire à setProps, mais elle supprimera le
props
d'origine. force update : forceUpdate
forceUpdate([function callback])
Description du paramètre
rappel, paramètre facultatif, fonction de rappel. Cette fonction sera appelée après l'appel de la méthode composantrender().
La méthode forceUpdate() amènera le composant à appeler sa propre méthode render() pour restituer le composant, et les sous-composants du composant appelleront également leur propre render(). Cependant, lorsque le composant est restitué, this.props et this.state seront toujours lus. Si l'état n'a pas changé, React mettra uniquement à jour le DOM.
La méthode forceUpdate() convient pour redessiner des composants autres que this.props et this.state (par exemple : après avoir modifié this.state). Cette méthode est utilisée pour notifier à React que render() doit être). appelé
En général, vous devriez essayer d'éviter d'utiliser forceUpdate() et simplement lire l'état de this.props et this.state et demander à React de déclencher l'appel render().
Récupérez le nœud DOM : findDOMNode
DOMElement findDOMNode()
Valeur de retour : élément DOM DOMElement
Si le composant a été monté dans le DOM , cette méthode renvoie l'élément DOM du navigateur local correspondant. Lorsque render renvoie null ou false, this.findDOMNode() retournera également null. Cette méthode est utile lors de la lecture de valeurs du DOM, comme l'obtention de la valeur d'un champ de formulaire et l'exécution de certaines opérations DOM.
Déterminer l'état de montage du composant : isMounted
bool isMounted()
Valeur de retour : true ou false, indiquant le composant S'il a été monté dans le DOM
isMounted() La méthode est utilisée pour déterminer si le composant a été monté dans le DOM. Cette méthode peut être utilisée pour garantir que setState() et forceUpdate() ne se tromperont pas lorsqu'ils seront appelés dans des scénarios asynchrones.
Référence pour cet article : http://itbilu.com/javascript/react/EkACBdqKe.html
