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

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

寻∝梦

Libérer： 2018-09-11 16:01:50

original

1852 Les gens l'ont consulté

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 Name

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.

9. Utilisation des attributs :

a, //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);

Copier après la connexion

10. Utilisation de l'état :

 var HelloWorld = React.createClass({             render:function(){                 return <p>Hello,{this.props.name||"world"}</p>             }         });         var HelloUniverse = React.createClass({             handleChange:function(e){                 this.setState({                     name:e.target.value                 });             },             getInitialState:function(){                 return {                     name:&#39;&#39;,                 }             },             render:function(){                 return <p>
                     <HelloWorld {...this.state}/>
                     <input type="text" onChange={this.handleChange} />
                 </p>             }         });         var a = ReactDOM.render(<HelloUniverse/>
         ,document.getElementById("root"));

Copier après la connexion

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

 <!DOCTYPE html>
 <html lang="zh-cn">
 <head>
     <meta charset="UTF-8">
     <title>Hello,world</title>
     <script src="../demo01/build/react.js"></script>
     <script src="../demo01/build/react-dom.js"></script>
     <script src="../demo01/browser.min.js"></script>
 </head>
 <body>
     <p id= "root"></p>
     <script type="text/babel">         var GenderSelect = React.createClass({             render:function(){                 return <select name="gender" onChange={this.props.handleSelect}>
                     <option value="1">男</option>
                     <option value="0">女</option>
                 </select>             }         });         var SignupForm = React.createClass({             getInitialState:function(){                 return {                     name:&#39;&#39;,                     pwd:&#39;&#39;,                     gender:&#39;&#39;,                 }             },             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 <form>
                     <input type="text" onChange={this.handleChange.bind(this,&#39;name&#39;)}/>
                     <input type="text" onChange={this.handleChange.bind(this,&#39;pwd&#39;)}/>
                     <GenderSelect handleSelect={this.handleSelect}/>
                 </form>             }         });         var a = ReactDOM.render(<SignupForm />,document.getElementById("root"));
     </script>
 </body>
 </html>

Copier après la connexion

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

 <!DOCTYPE html>
 <html lang="zh-cn">
 <head>
     <meta charset="UTF-8">
     <title>Hello,world</title>
     <script src="../demo01/build/react.js"></script>
     <script src="../demo01/build/react-dom.js"></script>
     <script src="../demo01/browser.min.js"></script>
 </head>
 <body>
     <p id= "root"></p>
     <script type="text/babel">         var SetInit = {             handleClick:function(e){                 console.log(e.target.value);             }         }         var Hello = React.createClass({             //这里命名必须为mixins
             mixins:[SetInit],             render:function(){                 return <input type="button" onClick={this.handleClick} value="123123"/>             }         });         var a = ReactDOM.render(<Hello />,document.getElementById("root"));
     </script>
 </body>
 </html>

Copier après la connexion

instance de mixin

Avantages et inconvénients :

 <!DOCTYPE html>
 <html lang="zh-cn">
 <head>
     <meta charset="UTF-8">
     <title>Hello,world</title>
     <script src="../demo01/build/react.js"></script>
     <script src="../demo01/build/react-dom.js"></script>
     <script src="../demo01/browser.min.js"></script>
 </head>
 <body>
     <p id= "root"></p>
     <script type="text/babel">         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:&#39;&#39;                 }             },             render:function(){                 return <p>
                     <input type="text" onChange={this.handleChange(&#39;text&#39;)} />
                     <p>{this.state.text}</p>
                 </p>             }         });         var a = ReactDOM.render(<Example />,document.getElementById("root"));
     </script>
 </body>
 </html>

Copier après la connexion

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,

;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 :
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:&#39;example&#39;,
　　}
}

Copier après la connexion

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!