Notes de réaction - Extension React

Extension de réaction

définir l'état

1. setState(stateChange,[callback]) ------ setState basé sur des objets

2. stateChange est l'objet de changement d'état (cet objet peut refléter le changement d'état)

3. le rappel est une fonction de rappel facultative, qui est appelée après la mise à jour du statut et la mise à jour de l'interface (appels de rendu)

4. setState(updater,[callback]) ------ SetState fonctionnel

5. updater est une fonction qui renvoie un objet stateChange

6. le programme de mise à jour peut recevoir l'état et les accessoires

7. le rappel est une fonction de rappel facultative, qui est appelée après la mise à jour du statut et la mise à jour de l'interface (appel de rendu)

Résumer:

1. setState de style objet est l'abréviation de setState fonctionnel (sucre syntaxique)
2. Principes d'utilisation :
3. Si le nouvel état ne dépend pas de l'état d'origine ==> utiliser le style objet
4. Si le nouvel état dépend de l'état d'origine ==> utiliser l'expression fonctionnelle
5. Si vous avez besoin d'obtenir les dernières données d'état après l'exécution de setState(), lisez-les dans la deuxième fonction de rappel.

paresseuxLoad

lazyLoad des composants de routage

// 1.通过React的lazy函数配合inport()函数动态加载路由组件 ===> 路由组件代码会被分开打包
const Login = lazy(() => import('@/pages/Login'))

// 2.通过<Suspense>指定在加载得到路由打包文件前显示一个自定义loading界面
<Suspense fallback={
    
    <h1>loading......</h1>}
    <Switch>
    <Route path="/xxx" component={
    
    Xxx} />
    <Redirect to="/login" />
    </Switch>
</Suspense>

Crochets

Que sont les crochets/crochets React

1. Hook est une nouvelle fonctionnalité/nouvelle syntaxe ajoutée dans la version React 16.8.0
2. Vous permet d'utiliser l'état et d'autres fonctionnalités de React dans les fonctions

Trois crochets couramment utilisés

1. Crochet d'état：React.useState()
2. Crochet d'effet：React.useEffect()
3. Crochet de référence：React.userRef()

Crochet d'État

1. State Hook permet aux composants de fonction d'être dans un état et de lire et d'écrire des données d'état.
2. Syntaxe : const [xxx,setXxx] = React.userState(initValue)
3. Description de useState() :
4. Paramètres : la valeur spécifiée lors de la première initialisation est mise en cache en interne.
5. Valeur de retour : un tableau contenant 2 éléments, le premier est la valeur d'état actuel interne et le second est la fonction de mise à jour de la valeur d'état
6. Il existe 2 façons d'écrire setXxx() :
7. setXxx(newValue) : le paramètre est une valeur non fonctionnelle, spécifie directement la nouvelle valeur d'état et l'utilise en interne pour écraser la valeur d'état d'origine.
8. setXxx(value => newValue) : le paramètre est une fonction, reçoit la valeur d'état d'origine, renvoie la nouvelle valeur d'état et l'utilise en interne pour écraser la valeur d'état d'origine.

Crochet d'effet

1. Effect Hook vous permet d'effectuer des opérations d'effets secondaires dans les composants de fonction (utilisés pour simuler des hooks de cycle de vie dans les composants de classe)

2. Opérations sur les effets secondaires dans React China :

3. Envoyer une requête ajax pour obtenir des données

4. Définir l'abonnement/la minuterie de démarrage

5. Changer manuellement le vrai DOM

6. Syntaxe et instructions :

useEffect(() => {
    
    
    // 在此可以执行任何带副作用的操作
    return () => {
    
    
    // 在此做一些收尾工作，比如清除定时器/取消订阅等
    }
},[stateValue]) // 如果指定的是[]，回调函数只会在第一次render()后执行

4. Vous pouvez considérer useEffect Hook comme une combinaison des trois fonctions suivantes

composantDidMount()

composantDidUpdate()

composantWillUnmount()

Réf Crochet

1. Ref Hook peut stocker/trouver des étiquettes ou toute autre donnée dans le composant dans les composants de fonction
2. Syntaxe : const refContainer = useRef()
3. Fonction : enregistrez l'objet label, la fonction est la même que React.createRef()

Fragment

utiliser

<Fragment></Fragment>
<></>

La fonction n'a pas besoin d'avoir une véritable balise racine DOM.

Contexte

Comprendre la méthode de communication entre les composants, souvent utilisée pour la communication entre [composant ancêtre] et [composant descendant]

utiliser

// 1.创建Context容器对象
   const XxxContext = React.createContext()

// 2.渲染子组件时，外面包裹xxxContext.Provider，通过value属性给后代组件传递数据
    <xxxContext.Provider value={
    
    数据}>
    子组件
    </xxxContext.Provider>

// 3.后代组件读取数据

    // 第一种方式：仅适用于类组件
    static contextType = xxxContext // 声明接收context
    this.context  // 读取context中的value数据

    // 第二种方式：函数组件与类组件都可以
    <xxxContext.Consumer>
    {
    
    
        value => (  // value 为context中的value数据
        要显示的内容
        )
        }
    </xxxContext.Consumer>

Notez que le contexte n'est généralement pas utilisé dans le développement d'applications et que son plug-in de réaction encapsulé est généralement utilisé.

Optimisation des composants

2 questions sur le composant

1. Tant que setState() est exécuté, le composant restituera() même si les données d'état ne sont pas modifiées ==> Faible efficacité
2. Si seul le composant courant est re-render(), le sous-composant sera automatiquement restitué, même si le sous-composant n'utilise aucune donnée du composant parent ==> Faible efficacité

approche efficace

Rendre le rendu uniquement lorsque l'état du composant ou les données des accessoires changent

raison

ShouldComponentUpdate() dans Component renvoie toujours true

résoudre

1. Remplacez la méthode ShouldComponentUpdate(), comparez l'ancien et le nouveau état ou les données d'accessoires, renvoyez true s'il y a un changement et renvoyez false s'il n'y a pas de changement.
2. Utilisation de PureComponent PureComponent réécrit ShouldComponentUpdate() et renvoie true uniquement si les données d'état ou d'accessoires changent.

Avis:

只是进行state和props数据的浅比较，如果只是数据对象内部数据变了，返回false

不要直接修改state数据，而是要产生新数据

项目中一般使用PureComponent来优化

accessoires de rendu

Comment passer dynamiquement une structure (tag) avec du contenu dans un composant ?

Dans Vue :

使用slot技术，也就是通过组件标签体传入结构`<A><B/></A>`

Pendant Réagir :

使用children props：通过组件标签体传入结构

使用render props：通过组件标签属性传入结构，而且可以携带数据，一般用render函数属性

accessoires pour enfants

<A>
    <B>xxxx</B>
</A>

{this.props.children}
问题；如果B组件需要A组件内的数据，==> 做不到

accessoires de rendu

<A render={(data) => <C data={data}></C>}></A>

A组件：{this.props.render(内部state数据)}
C组件：读取A组件传入的数据显示{this.props.data}

limites d'erreur

comprendre:

错误边界(Error boundary)：用来捕获后代组件的错误，渲染出备用页面

Caractéristiques:

只能捕获后代组件生命周期产生的错误，不能捕获自己组件产生的错误和其他组件在合成事件、定时器中产生的错误

Comment utiliser:

getDerivedStateFromError pourcomponentDidCatch

// 生命周期函数，一旦后台组件报错就会触发
static getDerivedStateFromError(error){
    
    
    console.log(error)
    // 在render 之前触发
    // 返回新的state
    return {
    
    
    hasError:true,
    }
}

componentDidCatch(error,info){
    
    
    // 同级页面的错误，发送请求到后台
    console.log(error,info)
}

Résumé des méthodes de communication des composants

Relations entre les composants :

• Composants parent-enfant
• Composants frères (composants non imbriqués)
• Composants grands-parents et petits-enfants (composants inter-niveaux)

Plusieurs modes de communication :

1. accessoires :
2. accessoires pour enfants
3. accessoires de rendu
4. Abonnement aux messages-Publier
5. pubs-sub、event等
6. Gestion centralisée
7. redux, dva, etc.
8. contexte
9. modèle producteur-consommateur

Une meilleure façon de faire correspondre :

父子组件：props

兄弟组件：消息订阅-发布、集中式管理

祖孙组件(跨级组件)：消息订阅-发布、集中式管理、conText(开发用的少，封装插件用的多)