React est-il un développement basé sur des composants ?

React est le développement de composants ; la composantisation est l'idée centrale de React. De petits composants indépendants et réutilisables peuvent être développés pour construire des applications. Toute application sera résumée dans une arborescence de composants. La page est divisée en. petits modules fonctionnels, et chaque fonction remplit sa propre fonction indépendante.

L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 17.0.1, ordinateur Dell G3.

React est-il un développement de composants ? Pour résoudre , divisez-le en plusieurs petits problèmes qui peuvent être traités

puis mettez-les dans l'ensemble , vous constaterez que les gros problèmes seront facilement résolus

En fait, l'idée ci-dessus est l'idée de diviser pour régner :

Diviser pour régner C'est une idée importante en génie logiciel et la pierre angulaire du développement et de la maintenance de systèmes complexes
• La modularisation et la modularisation actuelles du front-end sont basés sur l'idée de diviser pour régner
  2. Qu'est-ce que le développement de composants ?
• La composantisation a une idée similaire :
  • Si nous rassemblons toute la logique dans une page, elle deviendra très compliqué à traiter, ce qui n'est pas propice à une gestion et une expansion ultérieures
  • Mais si nous
  divisons une page en Chaque petit module fonctionnel
, chaque fonction

complète sa propre fonction indépendante

, alors la gestion et la maintenance de l'ensemble la page devient très simple

• • Nous devons penser à la page entière à travers l'idée de composantisation Application :
  • Nous divisons une page complète en plusieurs composantsChaque composant est utilisé pour implémenter une fonctionnalité bloc de la page

3. La composantisation de React

La composantisation est celle de React L'idée principale est que l'application que nous avons encapsulée plus tôt est elle-même un composant
• La composantisation fournit une abstraction qui nous permet de développer des petits composants indépendants et réutilisables. composants pour construire nos applications
  • Toute application sera résumée dans une seule arborescence de composants

Application de la pensée basée sur les composants :

• Divisez la page en petits composants réutilisables autant que possible
  • Cela rend notre code est plus pratique à organiser et à gérer, et l'évolutivité est également plus forte

4. Classification des composants React

• Les composants React
  sont plus flexibles et diversifiés
  • par rapport à Vue
  , et peuvent être divisés en de nombreux types de composants de différentes manières :
  • Selon la façon dont le composant est défini, il peut être divisé en :
  Composant fonctionnel
(Composant fonctionnel) et

Composant de classe

(Composant de classe)Selon s'il y a un état à l'intérieur du composant qui doit être maintenu, il peut être divisé en :

Stateless Component

(Stateless Component) et
• Stateful Component(Stateful Component)Selon les différentes responsabilités du composant, il peut être divisé en : Composant de présentation
  (Composant de présentation) et
  • Composant de conteneur(Composant de conteneur)
  Ces concepts ont de nombreux chevauchements Mais ils se concentrent principalement sur la séparation de la
  • logique des données et de l'Affichage de l'interface utilisateur :
  Composants de fonction, sans état. les composants et les composants d'affichage se concentrent principalement sur l'affichage des
  • UIComposants de classe, composants avec état et composants de conteneur Faites attention à la logique des données
• Réagissez pour créer des composants
  • 1. Composant de classe
  • La définition du composant de classe est la suivante :
  Le nom du composant commence par un caractère majuscule (quel que soit le composant de classe ou le composant de fonction) )
Les composants de classe doivent

hériter de

 : React .ComponentLes composants de classe doivent implémenter la fonction render

définie à l'aide de class Un composant :

constructor est facultatif, nous initialisons généralement certaines données dans le constructor
• this.state est ce que nous conservons Les données à l'intérieur du composant
  • render() est la seule méthode qui doit être implémentée dans le composant class
  • React.Component
  • 类组件必须实现 render 函数
• 使用 class 定义一个组件：
  • constructor是可选的，我们通常在 constructor 中初始化一些数据
  • this.state中维护的就是我们组件内部的数据
  • render() 方法是 class 组件中唯一必须实现的方法

2.render函数的返回值

当render函数被调用时, 它会检查 this.props 和 this.state

🎜2. La valeur de retour de la fonction de rendu🎜🎜🎜🎜Lorsque la fonction render est Lorsqu'elle est appelée, elle vérifie les modifications dans this.props et this.state et renvoie 🎜un des types suivants🎜🎜

• Réagir aux éléments
  • Généralement créé via JSX JSX 创建
  • 例如:<p></p> 会被 React 渲染为 DOM节点, <mycomponent></mycomponent>会被 React 渲染为自定义组件
  • 无论是 <p></p> 还是 <mycomponent></mycomponent> 均为 React 元素
• 数组或 fragments: 使得 render 方法可以返回多个元素
• Portals: 可以渲染子节点到不同的 DOM 子树中
• 字符串或数值类型: 他们在 DOM 中会被渲染为文本节点
• 布尔类型或null: 什么都不渲染

3.函数组件

函数组件是使用 function 来进行定义的函数, 只是这个函数会返回和类组件中 render

Par exemple : <p></p> sera rendu dans DOM par React code> Node, <mycomponent></mycomponent> sera rendu en tant que composant personnalisé par React

Que ce soit <p></p> ou <mycomponent></mycomponent> sont tous des éléments React
• • tableaux ou fragments
   : permettant à la méthode render de renvoyer plusieurs elements
  Portails
 : peuvent restituer les nœuds enfants dans différents sous-arbres DOM

Types de chaînes ou numériques

 : ils seront rendus sous forme de nœuds de texte dans DOM

Type booléen ou null

 : ne rend rien🎜🎜

🎜3. Composant de fonction🎜

🎜Le composant de fonction est une fonction définie à l'aide de fonction, juste ceci La fonction renverra le même contenu que la fonction render dans le composant de classe🎜🎜🎜🎜Caractéristiques des composants de fonction (nous parlerons des hooks plus tard, qui sont différents)🎜🎜Il n'y a pas de cycle de vie, et il le sera également mis à jour et bloqué Chargé, mais il n'y a pas de fonction de cycle de vie🎜🎜Non ceci (instance de composant)🎜🎜Aucun état interne (état)🎜🎜🎜🎜🎜🎜🎜🎜Apprentissage recommandé : "🎜Tutoriel vidéo React🎜"🎜

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!