Entrée React16 à l'enterrement

Construire un environnement

Par défaut, vous avez installé node.js

Installer un échafaudage de réaction

Au cours du processus d'apprentissage, nous avons utilisé l'outil d'échafaudage officiel React create-react-app

npm install -g create-react-app

S'il indique qu'il n'y a aucune autorisation, les utilisateurs Win peuvent ouvrir le terminal en tant qu'administrateur et les utilisateurs Mac peuvent ajouter sudo devant.

Créer un nouveau premier projet

sous le fichier spécifié

create-react-app study-demo 

courir

cd study-demo
npm start

Introduction au répertoire de projet généré par l'échafaudage

• README.md : La fonction principale de ce fichier est de décrire le projet.
• package.json : Ce fichier est webpackle fichier de configuration et de gestion des packages de projet.
• package-lock.json : Ce fichier est expliqué en une phrase, qui consiste à verrouiller le numéro de version lors de l'installation, et il doit être téléchargé sur git pour garantir que les npm installdépendances de chacun peuvent être cohérentes lorsque d'autres personnes réinstallent.
• gitignore : Il s'agit du fichier de configuration de téléchargement sélectif de git.
• node_modules : Ce dossier est le package de dépendances de notre projet.
• public : fichiers publics, qui contiennent des modèles publics, des icônes et d'autres éléments.
• src : fichier principal d'écriture de code
  • index.js : Ceci est le fichier d'entrée du projet
  • index.css : Il s'agit index.jsdu fichier CSS dans
  • app.js : Ce fichier est équivalent à un module de méthode et à une programmation modulaire simple
  • serviceWorker.js : Ceci est pour l'écriture du développement mobile, PWA doit utiliser ce fichier, avec ce fichier, cela équivaut à avoir la fonction de navigation hors ligne

Écriture de base des composants

Modifier le fichier App.js

import React, {Component} from 'react'

class App extends Component{
    render(){
        return (
            <div className="content">
                Hello React
            </div>
        )
    }
}
export default App;

La classe ici est l'utilisation d'un langage orienté objet

className est le traitement spécial de React pour le distinguer de la classe

Bases de la syntaxe JSX dans React

JSX est un format qui combine Javascript et XML.

React a inventé JSX, qui peut facilement utiliser la syntaxe HTML pour créer un DOM virtuel

Lorsqu'il est rencontré <, JSX est analysé comme HTML

Si vous le rencontrez, { il sera analysé par JavaScript.

Par exemple, si nous écrivons une syntaxe JSX

<ul className="my-list">
    <li>Hello React</li>
    <li>I love React</li>
</ul>

équivalent à

var child1 = React.createElement('li', null, 'Hello React');
var child2 = React.createElement('li', null, 'I love React');
var root = React.createElement('ul', { className: 'my-list' }, child1, child2);

La différence entre les composants et la syntaxe JSX ordinaire

Les composants personnalisés doivent commencer par des lettres majuscules, tandis que JSX commence par des lettres minuscules.

Utiliser l'opérateur ternaire dans JSX

<ul className="my-list">
    <li>Hellow {false?'React':'Word'}</li>
    <li>I love React</li>
</ul>

Utiliser des boucles dans JSX

jsx peut étendre automatiquement les tableaux

<ul>
     {
         this.state.list.map((item,index)=>{
             return <li>{item}</li>
         })
      }
</ul> 

Balises de fragmentation

Parce qu'un composant ne peut avoir qu'un seul répertoire racine

Les balises vides ne laisseront pas de traces sur la page

Équivalent au modèle de vue et au bloc d'applet

Conception réactive et liaison de données

ReactIl n'est pas recommandé de manipuler directement DOMles éléments, mais de parcourir les données pour modifier l'effet dans l'interface.

Les données sont définies dans le constructeur du composantconstructor

constructor(props){
    super(props) //调用父类的构造函数，固定写法
    this.state={
        inputValue:'' , // input中的值
        list:[]    //列表
    }
}

Lier des données

<input value={this.state.inputValue} /> 

événement de liaison

render()Créez une inputChange()méthode sous la méthode

inputChange(e){
    console.log(e.target.value);
    this.setState({
        inputValue:e.target.value
    })
}

lier l'événement

<input value={this.state.inputValue} onChange={this.inputChange.bind(this)} />

​ 1. Vous devez utiliser bindpour définir le pointeur (syntaxe ES6)

2. Pour modifier la valeur, vous devez utiliser this.setStatela méthode

événement de clic

<div>
    <input value={this.state.inputValue} onChange={this.inputChange.bind(this)} />
    <button onClick={addList}> 增加 </button>
</div>

addList(){
    this.setState({
        list:[...this.state.list,this.state.inputValue]
    })

}

point important:

1. JSX 的点击事件写法是 onClick
1. React是禁止直接操作 state 的， 比如push，splice 都是不建议使用

Commentaires sur le code JSX

<Fragment>
    {/* 第一种写法写法 */}
    
    {
        // 第二种写法，此写法只能单独写一行
    }
</ Fragment>

JSX analyse le HTML

Peut être résolu en utilisant dangerouslySetInnerHTMLles propriétés

<div dangerouslySetInnerHTML={
   
   {__html: this.state.htmlValue}}>

Composants

Le composant parent transmet la valeur au composant enfant

composant parent

import React,{Component,Fragment } from 'react'
import Item from './Item'

class Test extends Component{
	constructor(props){
    super(props)
    this.state={
        list:[1, 2] 
    }
	}

	render() {
		return (
			<Pragment>
				<ul>
    				{
      				this.state.list.map((item,index)=>{
        				return (
          				<Item key={index} content={item} />
        				)
      				})
    				}
  			</ul>  
			</ Pragment>
		)
	}
}

export default Test

Sous-ensemble

import React, { Component } from 'react'; 
class Item extends Component { 

    render() { 
        return ( 
            <div>{this.props.content}</div>
         );
    }
}
export default Item;

Le composant enfant transmet les données au composant parent

React stipule clairement que les composants enfants ne peuvent pas exploiter les données du composant parent, vous devez donc utiliser une méthode de composant parent pour modifier le contenu du composant parent.

import React,{Component,Fragment } from 'react'
import Item from './Item'

class Test extends Component{
	constructor(props){
    super(props)
    
    this.handleClick=this.handleClick.bind(this)
    
    this.state={
        list:[1, 2] 
    }
	}
	
	handleClick(key){
     const arr = this.state.list.filter(item => item !==key)
     this.setState({
        list: arr
    })
  }

	render() {
		return (
			<Pragment>
				<ul>
    				{
      				this.state.list.map((item,index)=>{
        				return (
          				<Item key={index} content={item} handleDel={handleClick} />
        				)
      				})
    				}
  			</ul>  
			</ Pragment>
		)
	}
}

export default Test

Sous-ensemble

import React, { Component } from 'react'; 
class Item extends Component { 

		handleClick(key){
    	this.props.handleDel(key)
		}

    render() { 
        return ( 
            <div onClick={()=> handleClick(this.props.content).bind(this)}>{this.props.content}</div>
         );
    }
}
export default Item;

prop-types vérifie la valeur transmise

En vue, nos accessoires : {xxx: { type: xxx, isRequire: true, default: xxx }} peuvent vérifier la valeur transmise

En réaction, nous pouvons utiliser des types d'accessoires

import React, { Component } from 'react'; 
import PropTypes from 'prop-types'

class Item extends Component { 

		handleClick(key){
    	this.props.handleDel(key)
		}

    render() { 
        return ( 
            <div onClick={()=> handleClick(this.props.content).bind(this)}>{this.props.content}</div>
         );
    }
}

Item.PropTypes = {
	content: PropTypes.string,
	handleDel: PropTypes.func
}

export default Item;

isRequiredMot clé, il indique qu'il doit être passé, s'il n'est pas passé, une erreur sera signalée

Item.PropTypes = {
	content: PropTypes.string.isRequired,
	handleDel: PropTypes.func.isRequired
}

Définir la valeur par défaut

Item.defaultProps = {
  content: '默认的值'
}

Utilisation des références

Comme vue, si vous définissez ref, vous pouvez obtenir la plupart des informations de l'élément

définition

<input 
	 className="input" 
   value={this.state.inputValue} 
   onChange={this.inputChange.bind(this)}
	 ref={(inputRef)=>{this.inputRef=inputRef}}
/>

utiliser

inputChange(){
    this.setState({
        inputValue:this.inputRef.value
    })
}

Cycle de vie de réaction

Le cycle de vie de React est divisé en quatre étapes principales

Initialisation : initialisation

Montage: monter

Mise à jour : mise à jour

Démontage : Détruire

point important:

Le constructeur n'est pas une fonction de cycle de vie, bien qu'il ait les mêmes propriétés qu'une fonction de cycle de vie.

Initialisation

Définir les propriétés (accessoires) et l'état (état)

Montage

1. componentWillMount: Exécuté lorsque le composant est sur le point d'être monté sur la page.
2. render: Exécuté lorsque l'état de la page ou les accessoires changent.
3. componentDidMount: Exécuté lorsque le montage des composants est terminé.

point important:

componentWillMountCes componentDidMountdeux fonctions de cycle de vie ne sont exécutées qu'une seule fois lorsque la page est actualisée, et renderles fonctions sont exécutées chaque fois que l'état et les accessoires changent.

Mise à jour

1. shouldComponentUpdateLa fonction sera automatiquement exécutée avant la mise à jour du composant. Il nécessite de renvoyer un résultat de type booléen et doit avoir une valeur de retour. Il est souvent utilisé pour l'optimisation des performances des composants.
2. componentWillUpdateshouldComponenUpdateExécuté avant mais après la mise à jour du composant .
3. componentDidUpdateExécuté après la mise à jour du composant, c'est la dernière étape de la mise à jour du composant
4. componentWillReceivePropsLorsque le composant enfant reçoit les paramètres passés par le composant parent, la fonction de rendu du composant parent est réexécutée et ce cycle de vie sera exécuté.

point important:

​ Si shouldComponentUpdatefalse est renvoyé, les fonctions suivantes ne seront pas exécutées.

​Le composantcomponentWillReceiveProps reçoit les paramètres transmis par le composant parent, la fonction de rendu du composant parent est réexécutée et ce cycle de vie sera exécuté.

Démontage

componentWillUnmountLa fonction est exécutée lorsque le composant est supprimé de la page.

Optimiser les composants à l'aide de ShouldComponentUpdate

Dans le code ci-dessus, une saisie fréquente dans notre zone de saisie entraînera des actualisations fréquentes des sous-composants, entraînant une perte de performances.

shouldComponentUpdateCe problème peut être facilement résolu à l'aide de fonctions

shouldComponentUpdate(nextProps,nextState){
    if(nextProps.content !== this.props.content){
        return true
    }else{
        return false
    }
}