Quelles connaissances dois-je acquérir sur React ? Résumé des points de connaissance de réaction (avec des exemples complets)

Cet article présente principalement l'apprentissage dereactet résume les points de connaissances sur React

Commençons officiellement à apprendre React

1. . Si la première lettre d'un composant dans React est en majuscule, elle sera considérée comme un composant personnalisé. Si elle est en minuscule, elle sera considérée comme le propre nom d'élément du DOM. Si la première lettre du nom de votre composant personnalisé est en minuscule, aucune erreur ne sera signalée, mais elle ne sera pas affichée.

2. Il ne peut y avoir qu'un seul nœud le plus externe dans le retour d'un composant personnalisé.

3. Il ne peut pas y avoir d'instructions dans {} dans le HTML écrit, mais il peut y avoir des expressions d'évaluation. Mais vous pouvez écrire l'instruction dans une fonction, puis appeler la fonction dans {}.

4. Les noms de fonctions et les noms d'étiquettes sont nommés en chameau.

5. Utilisez htmlFor et className. Par exempleName

6. Écriture de style : vous pouvez utiliser var style = {color: "red", backgroundColor:" dans jsx blue"} puis ajoutez style={style} dans la balise personnalisée. N'oubliez pas d'utiliser la dénomination camel.

7. Attributs non-DOM :

a. dangereusementSetInnerHTML : insérer du code HTML directement dans JSX

b. c. clé : améliorer les performances de rendu. algorithme diff

8. Fonctions exécutées dans chaque cycle de vie du composant : a.

b. Courir.

c.

9. Utilisation des attributs :

a, //Attribuez la valeur "abc" au nom de l'attribut

b ,

var props = { 　　one:"123", 　　two:"456"　　 } 　　//展开语法相当于 c、var a = ReactDOM.render(,document.body);

10. Utilisation de l'état :

var HelloWorld = React.createClass({ render:function(){ return 
Hello,{this.props.name||"world"}
 } }); var HelloUniverse = React.createClass({ handleChange:function(e){ this.setState({ name:e.target.value }); }, getInitialState:function(){ return { name:'', } }, render:function(){ return 
   
 } }); var a = ReactDOM.render( ,document.getElementById("root"));

11, similitudes et différences entre les attributs et les états

12. Fonction de traitement des événements

13. Attributs des objets événementiels

14. Utilisation collaborative des composants

Parent et enfant Pour une utilisation collaborative, les composants enfants peuvent être utilisés pour appeler les méthodes des composants parents. Pour atteindre cet objectif, le composant parent est transmis au composant enfant via prop

(Voulez-vous pour en savoir plus, allez simplement sur le site Web PHP chinoisReact Reference Manualcolonne pour apprendre)Les composants Brothers peuvent transmettre le sous-composant A au composant parent, et le composant parent le transmet ensuite au sous-composant B. . accomplir.

15. mixin

Avantages et inconvénients :

16. Composants contrôlables et composants incontrôlables

Composants contrôlables La valeur est non codé en dur, tel que value={this.state.value}.

Incontrôlable, c'est le contraire.

Essayez d'utiliser des composants contrôlables

Problèmes rencontrés :

1 Dans l'élément de configuration wepack.config.js, car le chargeur du module a plusieurs éléments de configuration, donc il devrait s'agir de chargeurs, mais j'ai écrit un chargeur, ce qui a empêché les éléments de configuration suivants de prendre effet et de nombreux problèmes de compilation se sont produits. . .

2. Dans la balise de retour dans le rendu du composant, oubliez de taper / à la fin de la balise. Par exemple,

3. Toutes les balises non appariées dans le rendu doivent être fermées, telles que :
sinon Une erreur sera signalée : incorporé : Balise de fermeture JSX correspondante attendue pour

4. Une chose très intéressante, si je définis un certain attribut dans une certaine fonction, alors l'attribut ne sera pas être imprimé immédiatement. Le résultat correct doit être dans la fonction composantDidUpdate, c'est-à-dire attendre que le composant soit mis à jour avant de l'imprimer.

5. Si la prop du composant enfant est mise à jour dans le composant parent, veuillez ne pas mettre cette prop dans la fonction getInitialState en tant que propriété, car si la prop est mise à jour, le composant enfant ne mettra pas à jour le propriétés dans l'état (vous pouvez consulter le tableau en 11).

6. Si vous utilisez la syntaxe es6, c'est-à-dire que vous utilisez la méthode d'héritage de React.Component pour créer des composants, vous ne pouvez pas utiliser la fonction getInitialState() et un avertissement sera signalé : Avertissement : getInitialState a été défini. sur TodoApp, une classe JavaScript simple. Ceci n'est pris en charge que pour les classes créées à l'aide de React.createClass. Vouliez-vous définir une propriété d'état. à la place ?

Solution : Set constructor

constructor(props){ 　　super(props); this.state = { 　　　　example:'example', 　　} }

du PHP chinois site collège), si vous avez des questions, vous pouvez laisser un message ci-dessous.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!