Réagir Introduction aux composants
Réagir à l'intérieur de l'unité la plus petite: réagir élément / noeud virtuel
En React, il y a un concept appelé l'Assemblée
Composants de: la mesure de particules plus fines que la page est divisée en division modulaire.
Procédé de création de composants: classe (héritage de classe): application de classe étend {};
13/02/2020
Le concept de base de deux éléments: l'état et des accessoires
Etat: utilisé pour décrire l'état interne (dynamique de données) d'un composant
[Les photos de chaînes étrangères échoue décharge, la station source peut avoir un mécanisme de chaîne de sécurité, il est recommandé d'enregistrer l'image vers le bas télécharger directement (img-9iexgbZG-1582465469233) (C: \ Users \ joey \ AppData \ Roaming \ Typora \ typora-user-images \ image 20200213145958058.png)]
Il y a un changement de réengendrer nœuds trouveront automatiquement leur post-réagir aux différents nœuds, a trouvé
Par exemple:
import React from "react";
export default class Counter extends React.Component {
state = {
count: 0
};
render() {
return (
<div>
<p>
你一共点击了{this.state.count}次
</p>
//给button添加事件,用户点击加号count就加1,
<button
onClick={
()=>{
this.setState({
count:this.state.count+1
})
}
}
>+
</button>
</div >
)
}
}
portée fonctionnelle seulement pour produire une
React.createRef (); procédé qui est utilisé pour obtenir un natif de noeud
paquet
Ensemble peut être divisé en un composant sans état (Stateless) et l'assemblage avec état (Stateful)
Props interface externe
Les composants imbriqués réagissent, il sera accessoires d'occasion
[Les photos de chaînes étrangères échoue décharge, la station source peut avoir un mécanisme de chaîne de sécurité, il est recommandé d'enregistrer l'image vers le bas télécharger directement (img-qboqaiZj-1582465469235) (C: \ Users \ joey \ AppData \ Roaming \ Typora \ typora-user-images \ image 20200222094530833.png)]
Pour réagir sous-ensemble des interfaces d'assemblage, le sous-ensemble est amené directement utilisé, l'attention pour des erreurs d'éviter, les accessoires donnent sous-ensemble de la valeur par défaut
static defaultProps = {};//默认值,避免运行出错
[Les photos de chaînes étrangères échoue décharge, la station source peut avoir un mécanisme de chaîne de sécurité, il est recommandé d'enregistrer l'image vers le bas télécharger directement (img-XXrmQD5F-1582465469245) (C: \ Users \ joey \ AppData \ Roaming \ Typora \ typora-user-images \ image 20200222094727272.png)]
Le code échantillon
import React from "react";//引入React以及自定义的两个组件
import Title from "./title"
import Ibutton from "./Ibutton"
export default class extends React.Component {
state = {//自定义count为1
count: 1
}
increase = () => {
this.setState({
count:this.state.count + 1 //count增加的方法
})
}
decrease = () => {
this.setState({
count:this.state.count - 1 //count减小的方法
})
}
render() {
return (
<div>
<Title count={this.state.count} /> //count接口把值暴露出去
<Ibutton name={"+"} onClick={this.increase} />
<Ibutton name={"-"} onClick={this.decrease} />
</div>
)
}
}
Titre et Ibutton Sous-ensembles
//title:
import React from "react";
export default class extends React.Component{
static defaultProps = { //定义默认值,避免出错,兼容性考虑
count:0
}
render(){
return (
<h1>{this.props.count}</h1>
)
}
}
//Ibutton:
import React from "react";
export default class extends React.Component{
static defaultProps = { //同样的定义默认值,避免出错,兼容性考虑
name:"55",
onClick:()=>{console.log("click")}
}
render(){
return (
<button onClick={this.props.onClick}>{this.props.name}</button>
)
}
}
pureComponent
React.PureComponent
React.PureComponent
Et React.Component
il est très similaire. La différence est React.Component
pas atteint shouldComponentUpdate()
, et React.PureComponent
contrairement à la façon de l' état de faible profondeur et accessoire pour atteindre cette fonction.
Si on leur donne les mêmes composants et accessoires React état, render()
la fonction rend le même contenu, l' utilisation et dans certains cas , React.PureComponent
peut améliorer les performances.
Faites attention
React.PureComponent
LashouldComponentUpdate()
relativement faible comme le seul objet. Si l'objet contient des structures de données complexes, il est possible parce qu'ils ne peuvent pas vérifier les différences profondes, l' erreur que les résultats. Seulement lorsque vos accessoires et l'état est relativement simple, l' utilisation justeReact.PureComponent
, ou lorsque les changements profonds dans la structure des appels de donnéesforceUpdate()
pour assurer que les composants sont correctement mis à jour
Note: Avant de préciser le motif de manipulation ne sont pas directement à l'intérieur des données est la vérité, afin d'optimiser les performances.