Réagissez aux questions d'entrevue, tout! ! ! (Seau familial)

Créez une commande de projet de réaction:

npx create-react-app my-app

Entrez dans le dossier:

cd my-app

Projet de démarrage:

npm start（开发模式下运行）
npm test(测试环境运行）
npm run build(打包为生产模式）

Afficher le fichier de configuration: irréversible, tant qu'il est affiché, il n'y a aucun moyen de le cacher

npm run eject

Pourquoi créer des sous-répertoires dans src?

webpack ne traite que les fichiers dans src. Si vous ne mentionnez pas que css et html sont placés dans le dossier src, webpack ne pourra pas les trouver .

react est une application d'une seule page

1. Qu'est-ce que React?

Bibliothèque JS utilisée pour construire l'interface utilisateur

2. Quelles sont les caractéristiques de React?

Il est utilisé pour le DOM virtuel, le mode de conception par composants, le code déclaratif, le flux de données à sens unique, utilise jsx pour décrire les informations et autres fonctionnalités

3. Qu'est-ce que le DOM virtuel?

DOM pour créer du HTML virtuel

Le DOM virtuel peut être considéré comme une arborescence d'objets js qui simule l'arborescence DOM. Par exemple:

var element = {
    element: 'ul',
    props: {
        id:"ulist"
    },
    children: [
    { element: 'li', props: { id:"first" }, children: ['这是第一个List元素'] },
    { element: 'li', props: { id:"second" }, children: ['这是第二个List元素'] }
    ]
}

4. Pourquoi utiliser le DOM virtuel?

Tant que les données traditionnelles changent, cela entraînera un nouveau rendu du DOM. Le but du DOM virtuel est d'accumuler toutes les opérations, de calculer toutes les modifications et de mettre à jour le DOM une fois.

5. Qu'est-ce qu'un modèle de conception par composants?

Le code réutilisable peut être extrait en composants pour une utilisation courante (UI, méthodes, etc.)

6. Pensée du code déclaratif (programmation):

Il s'agit de votre objectif et de la manière dont vous devez le faire, mais cela ne précise pas comment le faire.

Exemple: allez au bar et dites au serveur que vous voulez un cocktail, et le serveur vous donne le cocktail préparé et ne dit pas à quoi ressemble le processus

const toLowerCase = arr = arr.map(
    value => value.toLowerCase();
)

7. Existe-t-il d'autres modes de programmation?

Programmation impérative

Il s'agit de décrire le fonctionnement du code, de dire à l'ordinateur d'exécuter étape par étape, de faire quoi en premier et de faire ensuite.

Exemple: aller au bar pour commander un verre de vin et commander au serveur

Retirez un verre de l'étagère
Mettez le verre devant le tonneau de vin
Allumez l'interrupteur du baril de vin jusqu'à ce que le verre à vin soit plein
Passer le cocktail préparé au client

const toLowerCase = arr => {
    const res = [];
    for (let i = 0, len = arr.length; i < len; i++) {
        res.push(arr[i].toLowerCase());
    }
    return res;
}

8. Comparaison entre programmatique et impératif

Concis, facile à comprendre, propice à la maintenance du code de projet à grande échelle
Pas besoin d'utiliser des variables, évitez de créer et de modifier l'état

9. Qu'est-ce qu'un flux de données à sens unique

Les données sont principalement transmises du nœud parent au nœud enfant (via des accessoires). Si un accessoire du parent change, React rendra à nouveau tous les nœuds enfants ( comme l'eau d'une cascade, coulant de haut en bas, cette eau est le flux de données du composant). )

// 父组件
import React, {Component} from 'react'
import Child from './Child'
class Parent extends Component{   
    // 初始化
    constructor(props){
        super(props)
        this.state = {
            message: '我是从父组件传过来的'
        }
    } 
    // 渲染
    render(){
        return(
            <div>
                <Son msg={this.state.message}/>
            </div>
        )
    }
}
export default Parent


// 子组件
import React, {Component} from 'react'
class Child extends Component{  
    // 初始化
    constructor(props){
        super(props)
    } 
    // 渲染
    render(){
        return(
            <div>
               {this.props.message}
            </div>
        )
    }
}
export default Child

10. Qu'est-ce que JSX? Code JSX pour afficher le processus de conversion de contenu

JSX est le langage étendu de JS (syntaxe jsx = syntaxe js + syntaxe xml (html))

JSX est une abréviation de JavaScript XML, une extension grammaticale de JavaScript, et est essentiellement un objet JavaScript. JSX peut très bien décrire les informations de l'interface utilisateur, mais le navigateur ne peut pas les lire directement. JSX sera converti en syntaxe JS pendant le processus de compilation.

11. Quelles sont les principales fonctions de react?

Il utilise un DOM virtuel, pas un vrai DOM
Il suit un flux de données à sens unique

12.Les avantages et les inconvénients de react

avantage:

Amélioration des performances des applications et de l'efficacité du développement
En utilisant JSX, le code est lisible
Le cycle de vie du composant WillUnmount de React peut effacer tous les événements associés et éviter les fuites de mémoire
Il n'opère pas directement sur le DOM, mais introduit le concept d'un DOM virtuel, qui est inséré entre js et le vrai DOM, avec de bonnes performances et une vitesse rapide

Inconvénient: chaque fois que vous state changez, la render fonction doit générer un DOM virtuel complet, même si le state changement est faible, la renderfonction sera entièrement calculée. Si la render fonction est très compliquée, ce processus gaspillera en vain beaucoup de ressources informatiques

https://blog.csdn.net/weixin_42052388/article/details/80902388

13. Comparaison de la différence entre les deux cadres de VUE et React

Similitudes:

Bibliothèque Js pour créer une interface utilisateur
Léger et pratique à utiliser
DOM virtuel
Architecture basée sur les composants

différence :

Modèle HTML utilisé par vue; React utilise js
Vue a une syntaxe de liaison bidirectionnelle
Vue ajoute du sucre syntaxique calculé et watch, etc. React doit écrire sa propre logique pour réaliser
React utilise la syntaxe jsx
L'idée générale de react est la programmation, la composante recommandée, les données inchangées, le flux de données à sens unique; Les données Vue sont variables, liaison bidirectionnelle, écriture déclarative

14. Comment fonctionne React

React créera un DOM virtuel. Lorsque l'état d'un composant change, React utilisera d'abord l'algorithme "diffing" pour marquer les changements dans le DOM virtuel. La deuxième étape est l'ajustement, qui mettra à jour le DOM avec le résultat du diff.

15.Real DOM 和 Virtual DOM

React ne manipule pas directement le DOM, mais implémente le DOM virtuel. Le DOM du composant est mappé à ce DOM virtuel. React implémente l'algorithme de différence sur le DOM virtuel. Lors du nouveau rendu du composant, il trouvera le nœud DO0M à modifier via diff, puis mettra à jour la modification vers le nœud DOM réel du navigateur.

17. Pourquoi le DOM virtuel améliore les performances

Le DOM virtuel équivaut à ajouter un cache entre JS et le DOM réel, en utilisant diff pour réduire les opérations inutiles, améliorant ainsi les performances. Il s'agit essentiellement d'un objet JS.

Le DOM virtuel est une structure de données d'objet js qui mappe le DOM réel
Utilisez le DOM virtuel pour éviter la manipulation directe du vrai DOM et améliorer les performances
Lorsque l'état est mis à jour, le nouveau DOM virtuel est de nouveau rendu, et l'algorithme de diff est utilisé pour comparer le nouveau et l'ancien DOM à mettre à jour

18.Comportement par défaut de Block React

e.preventDefault () e est un événement synthétique fourni par un tiers

Remarque: vous ne pouvez pas utiliser de retour

class App extends React.component{
constructor(props){
super(props);
this.state = {
}
}

hander(e){
e.preventDefault()
}
render(){
return <button onClick={ this.hander.bind(this) }>阻止事件</button>
}
}

19. Passez les paramètres au gestionnaire d'événements

Par exemple, supprimez l'ID de la ligne actuelle

<button onClick={(e) => this.delete(e,id)}>Delete Row<button>
<button onClick={this.delete.bind(this,id)}>Delete Row</button>

20. Quel est le rôle de la clé dans React?

Fonction (objectif): la clé est un identifiant auxiliaire utilisé pour suivre les éléments de la liste qui ont été modifiés, supprimés ou ajoutés. Dans l'algorithme de diff, la clé est utilisée pour déterminer si le nœud d'élément est déplacé ou un élément nouvellement créé, réduisant ainsi le rendu répété inutile des éléments.

21. Lors du rendu d'une liste, quelle est la clé?

Les clés aideront React à identifier ce qui itemsa changé, ce qui a été ajouté ou supprimé. Les clés doivent être affectées aux éléments du tableau pour donner une identification stable à l'élément (DOM). La meilleure façon de choisir une clé est d'utiliser une chaîne qui identifie de manière unique un élément de liste. Plusieurs fois, vous utiliserez les données dans les ID en tant que clés, lorsque vous n'avez pas d'ID stables items, vous pouvez utiliser le projet comme clé d'entrée d'index de rendu, mais cette approche n'est pas recommandée, si itemsvous pouvez réorganiser, conduira à re-renderralentir.

22. L'algorithme de diff dans React

La fonction de l'algorithme diff est de calculer la partie modifiée du DOM virtuel, puis d'effectuer des opérations DOM natives sur cette partie sans re-rendre la page entière.

https://www.cnblogs.com/yumingxing/p/9438457.html

L'algorithme de diff a 3 stratégies:

tree diff: les opérations de mouvement à plusieurs niveaux des nœuds DOM sont particulièrement rares et peuvent être ignorées.
Différence de composant: deux composants avec la même classe génèrent des structures de données similaires; deux composants avec des classes différentes génèrent des arborescences différentes
élément diff: pour un groupe de nœuds enfants de même niveau, distingués par un identifiant unique

Principe de l'algorithme de diff

Décomposer l'arborescence en fonction des niveaux et comparer uniquement les éléments au même niveau
Ajoutez un attribut clé unique à chaque unité de la structure de liste pour une comparaison facile
React ne correspondra qu'aux composants de la même classe
Dans l'opération de fusion, lorsque la méthode setState du composant est appelée, React le marquera comme sale. À la fin de chaque tour de la boucle d'événements, React vérifiera tous les composants marqués comme sales et effectuera un nouveau rendu.
Rendu sélectif des sous-arbres. Les développeurs peuvent re-shouldComponentUpdate pour améliorer les performances des différences.

23. Élément et composant dans React

L'élément est une structure de données qui décrit le contenu du didacticiel à l'écran et est une offre pour des objets d'interface utilisateur

Le composant est une fonction ou une classe qui peut accepter l'entrée de paramètre et retourner un ReactElement

24.props and state (quelle est la différence entre state (state) et properties (props) (of the component))

State est une structure de données, qui sera envoyée et modifiée au fur et à mesure que l'événement se poursuit, et ne peut être modifiée qu'à l'aide de setState
Les accessoires sont les propriétés du composant, transmises du composant parent au composant enfant, les accessoires ne peuvent pas être modifiés

L'état est local, sauf pour le composant dans lequel il se trouve, aucun autre composant n'est accessible

Composants sans état : composants sans état défini (les composants sans état sont construits via des déclarations fonctionnelles, une fonction est un composant)
Composant avec état : le composant avec état défini (le composant avec état est construit par composant, une sous-classe est un composant)

25. React peut déclarer des composants de deux manières: quelle est la différence entre eux et lequel choisiriez-vous dans quelles circonstances? ( Quels sont les moyens de créer des composants dans React)

Composant de fonction: la première lettre doit être en majuscule et l'élément react doit être retourné
Composants de classe: mettez en majuscule la première lettre, utilisez la méthode de rendu et retournez l'élément react

// 函数组件
function Welcome(props){
return (
<h1>hello world</h1>
)
}


// 类组件
class Welcome extends React.Component{
        render(){
            return (
            <div>11</div>
        )
    }
}

la différence:

Le composant fonctionnel semble être juste une fonction dont la valeur de retour est la structure DOM, mais derrière l'idée de composants sans état
Dans les composants fonctionnels, vous ne pouvez pas utiliser State, ni utiliser la méthode du cycle de vie du composant, qui détermine que les composants fonctionnels sont tous des composants extensibles, recevant des accessoires, rendant le DOM et ne prêtant pas attention à d'autres logiques
Il n'y a pas cela dans le composant de fonction
Les composants fonctionnels sont plus faciles à comprendre. Lorsque vous voyez un composant fonctionnel, vous savez que sa fonction est uniquement de recevoir des propriétés et d'afficher la page. Il n'effectue pas de traitement logique qui n'a rien à voir avec l'interface utilisateur. Il s'agit simplement d'une fonction pure. Peu importe la complexité de la structure DOM qu'il renvoie

26. Quelles sont les étapes du cycle de vie des composants React?

Il existe trois étapes différentes dans le cycle de vie des composants React:

Étape de rendu initiale: C'est l' étape où le composant est sur le point de commencer son parcours de vie et d'entrer dans le DOM.
Étape de mise à jour: une fois le composant ajouté au DOM, il ne peut être mis à jour et restitué que lorsque le prop ou l'état change. Celles-ci ne se produisent qu'à ce stade.
Phase de désinstallation: Il s'agit de la phase finale du cycle de vie du composant, le composant est détruit et supprimé du DOM.

27. Parlez brièvement du cycle de vie (indiquez la différence entre les méthodes du cycle de vie (des composants))

constuctor: initialiser les accessoires et l'état dans le constructeur
componentWillMount - exécuter avant le rendu du composant, apporter la modification finale à l'état
rendu: rendu
componentDidMount - s'exécute après le rendu du composant
componentWillReceiveProps - Cette fonction périodique agit sur la transition d'état provoquée par un changement d'accessoire spécifique
shouldComponentUpdate - Utilisé pour l'optimisation des performances, renvoie vrai ou faux selon des conditions spécifiques. Si vous souhaitez mettre à jour le composant, veuillez renvoyer true sinon renvoyer false . Par défaut, il renvoie false.
componentWillUpdate - Les données sont exécutées avant le changement
componentDidUpdate - Appelé immédiatement après le rendu
componentWillUnmount - Appelé après le déchargement du composant du DOM. Utilisé pour nettoyer l'espace mémoire

28. Qu'est-ce que le flux de données à sens unique et l'amélioration de l'état

Flux de données à sens unique: de haut en bas, le composant parent transmet les données d'état au composant enfant, et le composant enfant obtient la valeur via des accessoires (comme l'eau d'une cascade, coule de haut en bas, cette eau est les données flux du composant)
Promotion de l'état: interaction des données entre les composants (de nombreux sous-composants veulent utiliser cet état, élever cet état au sommet, qui utilise les accessoires à qui)

Exemple: si les deux composants doivent utiliser l'état de l'autre, la promotion d'état peut être utilisée à ce stade. La méthode spécifique consiste à écrire l'état des deux composants enfants dans leur composant parent, puis le composant parent transfère l'état aux accessoires du composant enfant, de sorte que le composant enfant soit également équivalent à state.

Composant parent

import React from "react"
import Child1 from "./child1"
import Child2 from "./child2"

export default class Parent extends React.Component {

    constructor() {
        super()
        this.state = {
            money: 1
        }
    }

    changeHander(e){
        this.setState({
            money: e.target.value
        })
    }
    render() {
        return (
            <div>
                <input type="text" value={ this.state.money } onChange={this.changeHander.bind(this)} />
                <p>Parent</p>
                人民比: <Child1 money={this.state.money} />
                美金: <Child2 money={this.state.money} />
            </div>
        )
    }
}

Sous-composant 1

import React from "react"

export default class Child1 extends React.Component{

    constructor(){
        super()
        this.state = {
            input1: 0
        }
    }

    componentDidMount(){
        this.setState({
            input1: this.props.money
        })
    }

    changeHander(e) {
        this.setState({
             input1: e.target.value
        })
    }

    render() {
        return(
            <div>
                 { this.props.money }
               <input type="text" value={ this.state.input1 } onChange={ this.changeHander.bind(this) }/>
            </div>
        )
    }
}

Sous-composant 2

import React from "react"

export default class Child2 extends React.Component{

    constructor(){
        super();
        this.state = {
            input2: 1
        }
    }

    componentDidMount(){
        this.setState({
            input2: this.props.money * 7
        })
    }

    changeHander(e) {
        this.setState({
             input2: e.target.value
        })
    }
    render() {
        return(
            <div>
                { this.props.money * 7}
               <input type="text" value={ this.state.input2 } onChange={ this.changeHander.bind(this) }/>
            </div>
        )
    }
}

29. Que s'est-il passé après avoir appelé setState

setState mettra à jour l'état

L'objet de paramètre entrant est fusionné avec l'état actuel du composant, puis le processus dit de réconciliation est déclenché. Après le processus de réconciliation, selon le nouvel état, l'élément React reconstruira le DOM virtuel, exécutez l'algorithme de différence pour comparez la différence entre la nouvelle et l'ancienne arborescence du DOM virtuel et mettez à jour la vue au lieu de tout afficher.

Le mécanisme de file d'attente de tâches utilisé par setState ne sera pas exécuté immédiatement, mais sera ajouté à la file d'attente et sera exécuté une fois dans la prochaine boucle d'événements

30. Pourquoi est-il recommandé que le paramètre passé à setState soit un callback (fonction de rappel) plutôt qu'un objet (ne pas comprendre - ne pas le mémoriser d'abord)

Étant donné que la mise à jour de this.props et this.state peut être asynchrone, vous ne pouvez pas compter sur leurs valeurs pour calculer l'état suivant

31. À propos de cette liaison == événement de clic de liaison de composant

// bind
// 1
<button onClick={this.handleClick.bind(this)}>hello<button/>
// 2
clicked(param,event){
    console.log(param) //hello world
    console.log(event.target.value) //按钮
}
render(){
    return (
        <React.Fragment>
            <button value="按钮" onClick={this.clicked.bind(this,"hello world")}>点击</button>
        </React.Fragment>
    )
}


// 2.在构造函数中默认绑定this(推荐）
this.handleClick = this.handleClick.bind(this)

// 3.使用箭头函数来处理,handleClick点击事件的方法
<button onClick={(e) => this.handleClick(e)}>Click me</button>

32. Le rôle du deuxième paramètre de setState (ne pas comprendre - ne pas mémoriser)

Cette fonction sera appelée lorsque l'appel de la fonction setState sera terminé et que le composant commencera à effectuer un nouveau rendu. Nous pouvons utiliser cette fonction pour vérifier si le rendu est terminé.

(Dans le constructeur) quel est le but d'appeler super (props)

Avant l'appel de super (), les sous-classes ne peuvent pas l'utiliser. Dans ES5, les sous-classes doivent appeler super () dans le constructeur. Parce que les accessoires passés à super () peuvent faciliter l' constructoraccès (dans la sous-classe)this.props

33. Qu'est-ce que le routage React?

Le routeur est utilisé pour définir plusieurs routes. Lorsqu'un utilisateur définit une URL spécifique, si cette URL correspond au chemin d'une "route" définie dans le routeur, l'utilisateur sera redirigé vers cette route spécifique.

import React from 'react';
import { Switch, Route, BrowserRouter } from 'react-router-dom';
import Home from './views/Home'

export default class App extends React.Component{
    // 初始化
    constructor(props){
        super(props);
        this.state = {}
    }
    // 渲染
    render(){
        return(
           <BrowserRouter>
               <Switch>
                   <Route component={Home} path="/" />
               </Switch>
           </BrowserRouter>
        )
    }
}

Réagissez aux questions d'entrevue, tout! ! ! (Seau familial)

Je suppose que tu aimes