Résumé des questions de l'entretien React2023 ~~~~Mise à jour en continu ! ! ! !

avant-propos

Toutes les questions d'entrevue résumées ici sont des questions d'entrevue provenant de divers scénarios réels de grands fabricants trouvés sur Niuke.com, et ont été résumées. Après l'avoir lu, vous pouvez certainement répondre à 88,8 % des questions d'entrevue liées à React.

1. Crochets couramment utilisés

useState() : permet d'utiliser l'état dans les composants fonctionnels. Utilisez useState() pour déclarer une variable d'état et utilisez-la pour 存储组件的状态. Le composant restituera chaque fois que l'état est modifié.

useEffect() : utilisé pour gérer les effets secondaires. Les effets secondaires font référence aux opérations qui ont lieu en dehors des composants React, telles que la récupération de données depuis le serveur, la manipulation d'éléments DOM, etc. Avec le crochet useEffect(), vous pouvez faire ce genre de chose sans écrire 生命周期de méthode dans votre composant de classe. cliquez pour apprendre

useContext() : vous permet dans React 使用上下文. Le contexte est un moyen de transmettre des données dans l'arborescence des composants, oui 避免通过Props一层层传递数据. À l'aide du crochet useContext(), vous pouvez accéder aux objets de contexte définis dans l'ensemble de votre application. cliquez pour apprendre

useReducer() : remplace le crochet useState(), utilisé pour 管理更复杂的状态. Il utilise les fonctions Reducer pour gérer l'état des composants, les fonctions Reducer 接收当前状态和要进行的操作, puis renvoie le nouvel état. Consultez cet article pour plus de détails sur son utilisation. cliquez pour apprendre

useCallback() : utilisé pour 避免在每次渲染时重新创建回调函数. Ceci est utile lorsque vous devez transmettre une fonction de rappel à un composant enfant, car il peut 避免子组件不必要地重新渲染. cliquez pour apprendre

useMemo() : utilisé pour 缓存计算结果, avec 避免在每次渲染时重新计算. Ceci est très utile, surtout lorsque le coût de calcul est élevé. cliquez pour apprendre

useRef() : utilisé pour 创建对DOM元素的引用. Il peut également être utilisé pour stocker des variables partagées entre les composants qui ne changent pas entre les rendus des composants. cliquez pour apprendre

2. La différence entre les composants de classe et les composants fonctionnels

1. Syntaxe : les composants de classe utilisent la syntaxe de classe ES6 pour créer des composants, tandis que les composants fonctionnels utilisent des déclarations de fonction pour créer des composants.
2. Gestion des états : les composants de classe peuvent utiliser state pour gérer l'état interne du composant, tandis que les composants fonctionnels utilisent généralement userState Hook pour gérer l'état.
3. Cycle de vie : les composants de classe peuvent utiliser des méthodes de cycle de vie, telles que componentDidMount, componentDidUpdate, etc. pour gérer le cycle de vie des composants, tandis que les composants fonctionnels utilisent useEffect Hook pour gérer.
4. Méthode d'appel : s'il s'agit d'un composant de fonction, l'appel consiste à exécuter la fonction. S'il s'agit d'un composant de classe, vous devez instancier le composant, puis appeler la méthode de rendu de l'objet d'instance.
5. Performance : les composants fonctionnels sont généralement plus légers que les composants de classe, car les composants de classe doivent être instanciés, tandis que les composants fonctionnels ne sont que des appels de fonction ordinaires.

Troisièmement, quel est le rôle de la clé dans React ?

1. Fonction : Dans React, la clé sert à donner à chaque composant un élément (Element) 做一个唯一的标识. Lorsque React met à jour un composant, il compare les anciens et les nouveaux composants key 是否一致, et s'ils correspondent, cela signifie qu'il s'agit du même composant, 直接更新它的内容即可. Si ce n'est pas le cas, un composant différent est requis 先删除旧组件，再新建一个新的组件et inséré dans l'arborescence DOM.

Par conséquent, le rôle de la clé est 帮助 React 快速判断出哪些元素发生了变化，从而提高性能，避免不必要的 DOM 操作. Dans le même temps, la clé peut également être utilisée pour assurer la stabilité de chaque élément lors du rendu du tableau, évitant ainsi la situation dans laquelle la position de l'élément du tableau change mais le contenu ne change pas.

Quatrièmement, la façon d'introduire le CSS dans React

1. Importation de fichiers .module.css dans des composants
   L'utilisation de fichiers .module.css pour introduire des styles pour les composants est également appelée CSS模块化.
   Les styles définis dans le fichier .module.css 只能作用于当前组件内部n'affecteront pas les autres composants ou les styles globaux, évitant ainsi les conflits de style.
2. CSS dans JS
   CSS dans JS est une technologie de développement frontal qui combine étroitement la définition de feuille de style CSS et le code JS pour obtenir un contrôle de style plus efficace et plus flexible. En CSS dans JS, les développeurs peuvent utiliser JS pour écrire des styles CSS et peuvent générer dynamiquement des styles via des variables ou des fonctions dans le code. Cette méthode peut éviter certains problèmes dans les CSS traditionnels, tels que la portée globale, l'imbrication des sélecteurs, les conflits de noms, etc., et offre également une réutilisation et une maintenabilité plus élevées.
   Dans React, il existe une variété de bibliothèques tierces qui prennent en charge CSS dans JS, et les plus couramment utilisées sont les composants de style, Emotion, JSS, etc. Ces bibliothèques fournissent des API pratiques pour définir et appliquer des styles, et peuvent gérer automatiquement l'introduction de CSS et l'empaquetage des composants. L'utilisation de CSS dans JS peut être mieux combinée avec l'idée de développement de composants pour améliorer la réutilisabilité et la maintenabilité du code.