Réagir Introduction aux composants

Réagir Introduction aux composants

Réagir à l'intérieur de l'unité la plus petite: réagir élément / noeud virtuel

En React, il y a un concept appelé l'Assemblée

Composants de: la mesure de particules plus fines que la page est divisée en division modulaire.

Procédé de création de composants: classe (héritage de classe): application de classe étend {};

13/02/2020

Le concept de base de deux éléments: l'état et des accessoires

Etat: utilisé pour décrire l'état interne (dynamique de données) d'un composant

[Les photos de chaînes étrangères échoue décharge, la station source peut avoir un mécanisme de chaîne de sécurité, il est recommandé d'enregistrer l'image vers le bas télécharger directement (img-9iexgbZG-1582465469233) (C: \ Users \ joey \ AppData \ Roaming \ Typora \ typora-user-images \ image 20200213145958058.png)]

Il y a un changement de réengendrer nœuds trouveront automatiquement leur post-réagir aux différents nœuds, a trouvé

Par exemple:

import React from "react";

export default class Counter extends React.Component {
    state = {
        count: 0
    };
    render() {
        return (
            <div>
                <p>
                    你一共点击了{this.state.count}次
                </p>
//给button添加事件，用户点击加号count就加1，
                <button
                    onClick={
                        ()=>{
                            this.setState({
                                count:this.state.count+1
                            })
                        }
                    }
                >+
                </button>
            </div >
        )
    }
}

portée fonctionnelle seulement pour produire une

React.createRef (); procédé qui est utilisé pour obtenir un natif de noeud

paquet

Ensemble peut être divisé en un composant sans état (Stateless) et l'assemblage avec état (Stateful)

Props interface externe

Les composants imbriqués réagissent, il sera accessoires d'occasion

[Les photos de chaînes étrangères échoue décharge, la station source peut avoir un mécanisme de chaîne de sécurité, il est recommandé d'enregistrer l'image vers le bas télécharger directement (img-qboqaiZj-1582465469235) (C: \ Users \ joey \ AppData \ Roaming \ Typora \ typora-user-images \ image 20200222094530833.png)]

Pour réagir sous-ensemble des interfaces d'assemblage, le sous-ensemble est amené directement utilisé, l'attention pour des erreurs d'éviter, les accessoires donnent sous-ensemble de la valeur par défaut

static defaultProps = {};//默认值，避免运行出错

[Les photos de chaînes étrangères échoue décharge, la station source peut avoir un mécanisme de chaîne de sécurité, il est recommandé d'enregistrer l'image vers le bas télécharger directement (img-XXrmQD5F-1582465469245) (C: \ Users \ joey \ AppData \ Roaming \ Typora \ typora-user-images \ image 20200222094727272.png)]

Le code échantillon

import React from "react";//引入React以及自定义的两个组件
import Title from "./title"
import Ibutton from "./Ibutton"

export default class extends React.Component {
    state = {//自定义count为1
        count: 1
    }
    increase = () => {
        this.setState({
            count:this.state.count + 1   //count增加的方法
        })
    }
    decrease = () => {
        this.setState({
            count:this.state.count - 1   //count减小的方法
        })
    }
    render() {
        return (
            <div>
                <Title count={this.state.count} />   //count接口把值暴露出去
                <Ibutton name={"+"} onClick={this.increase} />
                <Ibutton name={"-"} onClick={this.decrease} />
            </div>
        )
    }
}

Titre et Ibutton Sous-ensembles

//title:
import React from "react";

export default class extends React.Component{

    static defaultProps = { //定义默认值，避免出错，兼容性考虑
        count:0
    }
    render(){
        return (
        <h1>{this.props.count}</h1>
        )
    }
}
//Ibutton：
import React from "react";

export default class extends React.Component{

    static defaultProps = {  //同样的定义默认值，避免出错，兼容性考虑
        name:"55",
        onClick:()=>{console.log("click")}
    }

    render(){
        return (
        <button onClick={this.props.onClick}>{this.props.name}</button>
        )
    }
}

pureComponent

React.PureComponent

React.PureComponentEt React.Componentil est très similaire. La différence est React.Componentpas atteint shouldComponentUpdate(), et React.PureComponentcontrairement à la façon de l' état de faible profondeur et accessoire pour atteindre cette fonction.

Si on leur donne les mêmes composants et accessoires React état, render()la fonction rend le même contenu, l' utilisation et dans certains cas , React.PureComponentpeut améliorer les performances.

Faites attention

React.PureComponentLa shouldComponentUpdate()relativement faible comme le seul objet. Si l'objet contient des structures de données complexes, il est possible parce qu'ils ne peuvent pas vérifier les différences profondes, l' erreur que les résultats. Seulement lorsque vos accessoires et l'état est relativement simple, l' utilisation juste React.PureComponent, ou lorsque les changements profonds dans la structure des appels de données forceUpdate()pour assurer que les composants sont correctement mis à jour

Note: Avant de préciser le motif de manipulation ne sont pas directement à l'intérieur des données est la vérité, afin d'optimiser les performances.