JSX
JSX peut empêcher les attaques par injection XSS.
Avant le rendu, React DOM formatera toutes les valeurs dans JSX pour s'assurer que les utilisateurs ne peuvent pas injecter de code en dehors de l'application. Avant le rendu, toutes les données sont échappées dans le traitement des chaînes .
Rendu des éléments
Mettre à jour les éléments rendus
Les éléments React ne sont pas modifiables. Une fois que vous avez créé un élément, vous ne pouvez pas modifier ses éléments enfants ni aucun attribut. La seule façon de mettre à jour l'interface utilisateur est de créer un nouvel élément et de le transmettre à la méthode ReactDOM.render (). Mais gros La plupart du temps, la méthode de rendu ne sera appelée qu'une seule fois
Composants et attributs
Composants
Les composants sont divisés en composants fonctionnels et composants de classe
.
function Welcome(props) {
return <h1>Hello, {
props.name}</h1>;
}
Classe ES6:
class Welcome extends React.Component {
render() {
return <h1>Hello, {
this.props.name}</h1>;
}
}
Propriété, Props est en lecture seule
Les props sont en lecture seule. Peu importe que vous déclariez un composant dans une fonction ou une méthode de classe, vous ne pouvez pas modifier ses propres props.
Une fonction qui ne modifie pas l'entrée est appelée une fonction pure. Les
composants React doivent être des fonctions pures et il est interdit de modifier leurs propres props
état de l'état
L'état ne peut être setState()défini que par des méthodes et le seul this.stateendroit qui peut être alloué est le constructeur. La
mise à jour de l'état est asynchrone et vous ne pouvez pas compter sur la valeur de l'une pour mettre à jour l'autre . Vous pouvez effectuer le traitement suivant dans la fonction de rappel
Tout état appartient toujours à un composant spécifique, et toute donnée ou interface utilisateur dérivée de cet état ne peut affecter que les composants situés sous l'arborescence
Gestion des événements
Nommage de cas de chameau, passage d'une fonction comme gestionnaire d'événements
Dans le code js, la fonction de gestionnaire d'événements renvoie un faux pour empêcher l'événement par défaut, mais dans React, elle doit être appelée manuellement e.preventDefault()pour empêcher l'événement par défaut
Lorsque React, vous n'avez généralement pas besoin d'appeler addEventListenerpour ajouter des écouteurs d'événements dans l'élément DOM est créé. Au lieu de cela, fournissez simplement un écouteur lorsque l'élément est initialement rendu.
Lorsque vous appelez des gestionnaires d'événements, assurez-vous que cela pointe vers le composant actuel, afin de le lier, vous pouvez utiliser les méthodes suivantes
- bind 绑定 this.handleClick () = this.handleClick.bind (this)
- Utilisez la fonction flèche lors de l'appel de la fonction onClick = ((e) => this.handleClick (e))
- La fonction utilise directement func = () => ()
Pourquoi la gestion des événements dans React lie-t-elle cela?
Je n'ai pas étudié ce problème en profondeur auparavant, et j'ai soigneusement étudié ce problème après l'avoir relu.
Nous savons tous que le point this dans la fonction js ordinaire est l'objet qui appelle la fonction, et il indique de qui il est proche. En
mode non strict, cela pointe par défaut En
mode strict de la fenêtre d'objet globale , ceci n'est pas défini
La fonction flèche en a déjà déterminé la direction au moment de la définition et ne changera pas en fonction de qui l'appelle.
Sur cette base, on réagit directement pourquoi onClick={this.handleClick}pas?
La raison fondamentale est de réagir dans un dom dom virtuel, JSX est React.createElement(component, props, ...children)du sucre syntaxique, alors qu'en fait on appelle le code de la fonction événementielle
render(){
return (<a href="#" onClick={
this.handleClick}>click me </a>
})
Est analysé en
render(){
return React.createElement(
"a",
{
onClick: this.handleClick},
"click me"
);
}
Dans un tel code, le onClick = {function}en onClicklui-même est une "variable intermédiaire", qui this.handleClickest passée à une autre fonction en guise de rappel , et elle est perdue à ce stade. Prenons un exemple simple
class Cat {
sayThis () {
console.log(this);
}
exec (cb) {
cb();
}
render () {
this.exec(this.sayThis);
}
}
const cat = new Cat();
cat.render();
Lorsque sayThis est passé en paramètre à exec en tant que fonction de rappel, cela a été perdu,
nous devons donc le lier dans le traitement des événements de react
Forme
Composant contrôlé
Ceux qui ont utilisé vue savent que vue est un flux de données à liaison bidirectionnelle. L'élément de données du formulaire ne peut être lié que par v-model,
mais react est un flux de données à sens unique. Si vous souhaitez lier une zone de saisie dans le formulaire, Un état doit être effectué par des composants contrôlés
handleChange(event) { this.setState({value: event.target.value}); }
<input type="text" value={this.state.value} onChange={(e) => this.handleChange(e)} />
Utilisez la fonction de traitement onChange du formulaire pour mettre à jour les données d'entrée, dans lesquelles les données d'entrée peuvent être spécialement traitées, ce qui est plus conforme à la philosophie de conception de react pour donner une plus grande liberté aux utilisateurs
Enfin
N'oubliez pas que la lecture de code est bien plus importante que l'écriture de code. Un code modulaire et clairement structuré est le plus propice à la lecture. Lors de la création d'une grande bibliothèque de composants, vous apprécierez la modularité, la structure claire et le code réutilisable, et vos lignes de code diminueront progressivement.