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 de react et 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 exemple f48f817659b5fa20e8078bc1b66e32afName8c1ecd4bb896b2264e0711597d40766c

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, c66779f069bd2b7ec0a732d614208d0d //Attribuez la valeur "abc" au nom de l'attribut

b ,

a.setProps({name:"Tim"}); //Cette utilisation n'est pas recommandée, elle viole les principes de conception de React (la dernière version semble avoir supprimé cette fonction ? Venez sortez et récupérez le console.log J'ai recherché la chaîne de prototypes mais je n'ai pas trouvé cette fonction, seulement setState)

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

10. Utilisation de l'état :

 var HelloWorld = React.createClass({             render:function(){                 return e388a4556c0f65e1904146cc1a846beeHello,{this.props.name||"world"}94b3e26ee717c64999d7867364b1b4a3             }         });         var HelloUniverse = React.createClass({             handleChange:function(e){                 this.setState({                     name:e.target.value                 });             },             getInitialState:function(){                 return {                     name:'',                 }             },             render:function(){                 return e388a4556c0f65e1904146cc1a846bee
                     3d6f15d111504205b90761d1b885e19b
                     3aac1c4d464391a52269ddfd6b12d6a8
                 94b3e26ee717c64999d7867364b1b4a3             }         });         var a = ReactDOM.render(a6d3e660a2713293fe38ad9ec2a46721
         ,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

 76c82f278ac045591c9159d381de2c57
 e50fd76c890a16356472f13b52f09dcd
 93f0f5c25f18dab9d176bd4f6de5d30e
     a80eb7cbb6fff8b0ff70bae37074b813
     b2386ffb911b14667cb8f0f91ea547a7Hello,world6e916e0f7d1e588d4f442bf645aedb2f
     61eeee6dc069be0af6ec30e499aa96232cacc6d41bbb37262a98f745aa00fbf0
     ae137d68d2726eef3a3ab8fd02db82ac2cacc6d41bbb37262a98f745aa00fbf0
     6c01d1e7f9c8f4169484bfc77d321ec62cacc6d41bbb37262a98f745aa00fbf0
 9c3bca370b5104690d9ef395f2c5f8d1
 6c04bd5ca3fcae76e30b72ad730ca86d
     9461ebfd72f621e95575d38798f6304d94b3e26ee717c64999d7867364b1b4a3
     9d362b06220cee2dc15a3c815f80a61e         var GenderSelect = React.createClass({             render:function(){                 return 0af7195d42db1dffc2a9a5f85aaa2523
                     859be17dfcd6af2d26185135fb5bd8fc男4afa15d3069109ac30911f04c56f3338
                     302223510126f57919da8bd0aae4999d女4afa15d3069109ac30911f04c56f3338
                 18bb6ffaf0152bbe49cd8a3620346341             }         });         var SignupForm = React.createClass({             getInitialState:function(){                 return {                     name:'',                     pwd:'',                     gender:'',                 }             },             handleChange:function(name,e){                 var newState = {}                 newState[name] = e.target.value;                 this.setState(newState);             },             handleSelect:function(e){                 this.setState({gender:e.target.value});             },             render:function(){                 console.log(this.state)                 return ff9c23ada1bcecdd1a0fb5d5a0f18437
                     6bdab968141063db56c595ca92e6ba13
                     b09b07021e9bc4f0c6ac9ccf14b9d325
                     bb6e2821895de793301ee6cda0d13d50
                 f5a47148e367a6035fd7a2faa965022e             }         });         var a = ReactDOM.render(380d7116d918a5f1222d431cfa4f7858,document.getElementById("root"));
     2cacc6d41bbb37262a98f745aa00fbf0
 36cc49f0c466276486e50c850b7e4956
 73a6ac4ed44ffec12cee46588e518a5e

Interaction du composant parent-enfant

(Voulez-vous pour en savoir plus, allez simplement sur le site Web PHP chinois React Reference Manual colonne 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

 76c82f278ac045591c9159d381de2c57
 e50fd76c890a16356472f13b52f09dcd
 93f0f5c25f18dab9d176bd4f6de5d30e
     a80eb7cbb6fff8b0ff70bae37074b813
     b2386ffb911b14667cb8f0f91ea547a7Hello,world6e916e0f7d1e588d4f442bf645aedb2f
     61eeee6dc069be0af6ec30e499aa96232cacc6d41bbb37262a98f745aa00fbf0
     ae137d68d2726eef3a3ab8fd02db82ac2cacc6d41bbb37262a98f745aa00fbf0
     6c01d1e7f9c8f4169484bfc77d321ec62cacc6d41bbb37262a98f745aa00fbf0
 9c3bca370b5104690d9ef395f2c5f8d1
 6c04bd5ca3fcae76e30b72ad730ca86d
     9461ebfd72f621e95575d38798f6304d94b3e26ee717c64999d7867364b1b4a3
     9d362b06220cee2dc15a3c815f80a61e         var SetInit = {             handleClick:function(e){                 console.log(e.target.value);             }         }         var Hello = React.createClass({             //这里命名必须为mixins
             mixins:[SetInit],             render:function(){                 return 84c464c714467c62ed8a7b74d3934788             }         });         var a = ReactDOM.render(b242f848c3983ea1d4adbc5496a81c19,document.getElementById("root"));
     2cacc6d41bbb37262a98f745aa00fbf0
 36cc49f0c466276486e50c850b7e4956
 73a6ac4ed44ffec12cee46588e518a5e

instance de mixin

Avantages et inconvénients :

 76c82f278ac045591c9159d381de2c57
 e50fd76c890a16356472f13b52f09dcd
 93f0f5c25f18dab9d176bd4f6de5d30e
     a80eb7cbb6fff8b0ff70bae37074b813
     b2386ffb911b14667cb8f0f91ea547a7Hello,world6e916e0f7d1e588d4f442bf645aedb2f
     61eeee6dc069be0af6ec30e499aa96232cacc6d41bbb37262a98f745aa00fbf0
     ae137d68d2726eef3a3ab8fd02db82ac2cacc6d41bbb37262a98f745aa00fbf0
     6c01d1e7f9c8f4169484bfc77d321ec62cacc6d41bbb37262a98f745aa00fbf0
 9c3bca370b5104690d9ef395f2c5f8d1
 6c04bd5ca3fcae76e30b72ad730ca86d
     9461ebfd72f621e95575d38798f6304d94b3e26ee717c64999d7867364b1b4a3
     9d362b06220cee2dc15a3c815f80a61e         var BindingMixin = {             handleChange:function(name){                 var that = this;                 return function(e){                     var news = {};                     news[name] = e.target.value;                     that.setState(news);                 }             }         };         var Example = React.createClass({             //这里命名必须为mixins
             mixins:[BindingMixin],             getInitialState:function(){                 return {                     text:''                 }             },             render:function(){                 return e388a4556c0f65e1904146cc1a846bee
                     5985a603fea88064e808209d741039f4
                     e388a4556c0f65e1904146cc1a846bee{this.state.text}94b3e26ee717c64999d7867364b1b4a3
                 94b3e26ee717c64999d7867364b1b4a3             }         });         var a = ReactDOM.render(a7e09b9eeb1a809bc82d2666b8e06659,document.getElementById("root"));
     2cacc6d41bbb37262a98f745aa00fbf0
 36cc49f0c466276486e50c850b7e4956
 73a6ac4ed44ffec12cee46588e518a5e

mixin

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, e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3 ;p>react le reconnaîtra comme deux. Si une balise p est utilisée, elle signalera le contenu JSX intégré : non terminé.

3. Toutes les balises non appariées dans le rendu doivent être fermées, telles que : 076402276aae5dbec7f672f8f4e5cc81 0f0306f9b187f2e363126bc29c8b1420 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

Cet article se termine ici (si vous voulez en voir plus, rendez-vous dans la colonne

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

React User Manual

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!