Cet article présente principalement l'analyse des problèmes courants dans react. Il y a des questions et des réponses. Cliquez ici pour voir si l'une des questions peut vous aider à résoudre vos doutes. Lisons cet article maintenant
1 Quelle est la différence entre Element et Component dans React ?
La documentation officielle du site Web explique Element comme :
Elements are the smallest building blocks of React apps. An element describes what you want to see on the screen:
Le site officiel explique Compent comme :
Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called "props") and return React elements describing what should appear on the screen.
En d'autres termes, React Element est un description La structure des données de ce qui est vu à l'écran est la représentation objet de l'interface utilisateur. Un élément React typique est un morceau de code déclaratif construit à l'aide de JSX, puis converti en une combinaison d'appels createElement. Le composant React est une fonction ou une classe qui peut recevoir des entrées de paramètres et renvoyer un élément React.
2. JSX
React utilise JSX pour remplacer le JavaScript classique. JSX est une extension de syntaxe JavaScript qui ressemble beaucoup à XML. Nous n'avons pas nécessairement besoin d'utiliser JSX, mais il présente les avantages suivants :
JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。 它是类型安全的，在编译过程中就能发现错误。 使用 JSX 编写模板更加简单快速。
3 Que se passe-t-il après l'appel de setState ?
Après avoir appelé la fonction setState dans le code, React fusionnera l'objet paramètre transmis avec l'état actuel du composant, puis déclenchera le processus dit de réconciliation (Réconciliation). Après le processus de réconciliation, React construira l'arborescence des éléments React en fonction du nouvel état d'une manière relativement efficace et procédera au rendu de l'intégralité de l'interface utilisateur. Une fois que React a obtenu l'arborescence des éléments, React calculera automatiquement la différence de nœuds entre le nouvel arbre et l'ancien arbre, puis minimisera et restituera l'interface en fonction de la différence. Dans l'algorithme de calcul des différences, React peut savoir de manière relativement précise quelles positions ont changé et comment elles doivent être modifiées, ce qui garantit des mises à jour à la demande au lieu d'un nouveau rendu complet.
4. Dans quelles circonstances préféreriez-vous utiliser un composant de classe au lieu d'un composant fonctionnel ?
Utilisez le composant de classe lorsque le composant doit contenir un état interne ou utiliser des fonctions de cycle de vie, sinon utilisez des composants fonctionnels.
5. À quelle étape du cycle de vie devez-vous lancer une requête AJAX ?
Nous devrions mettre la requête AJAX dans la fonction composantDidMount pour les raisons suivantes :
L'algorithme de réconciliation de nouvelle génération de React, Fiber, optimisera les performances de l'application en démarrant ou en arrêtant le rendu. Cela affectera le. nombre de déclencheurs de composantWillMount. Le nombre d'appels à la fonction de cycle de vie composantWillMount devient incertain et React peut appeler composantWillMount plusieurs fois et fréquemment. Si nous mettons la requête AJAX dans la fonction composantWillMount, alors elle sera évidemment déclenchée plusieurs fois, ce qui n'est naturellement pas un bon choix.
Si nous plaçons la requête AJAX dans d'autres fonctions du cycle de vie, nous ne pouvons pas garantir que la requête ne nécessitera une réponse qu'après le montage du composant. Si notre demande de données est terminée avant que le composant ne soit monté et que la fonction setState est appelée pour ajouter des données à l'état du composant, une erreur sera signalée pour le composant non monté. Faire des requêtes AJAX dans la fonction composantDidMount peut efficacement éviter ce problème. (Si vous souhaitez en savoir plus, rendez-vous sur le site Web PHP chinois React Reference Manual pour en savoir plus)
6. Quelle est la différence entre un composant contrôlé et un composant non contrôlé ?
L'un des composants centraux de React sont les composants autonomes qui peuvent maintenir l'état interne. Cependant, lorsque nous introduisons des éléments de formulaire HTML natifs (input, select, textarea, etc.), devons-nous mettre tous les éléments de formulaire. data L'héberger dans un composant React ou le conserver dans un élément DOM ? La réponse à cette question réside dans la séparation définitionnelle des éléments contrôlés et non contrôlés. Le composant contrôlé fait référence aux composants contrôlés par React et toutes les données du formulaire sont stockées de manière uniforme. En d'autres termes, si la valeur d'éléments tels que <input /> 、<textarea />、<select /> dans React.js est contrôlée par React.js, alors il s'agit d'un composant contrôlé. Par exemple, dans le code suivant, la valeur de la variable nom d'utilisateur n'est pas stockée dans l'élément DOM, mais est stockée dans les données d'état du composant. Chaque fois que nous devons modifier la valeur de la variable username, nous devons appeler la fonction setState pour la modifier.
class ControlledForm extends Component {
state = {
username: ''
}
updateUsername = (e) => { this.setState({
username: e.target.value,
})
}
handleSubmit = () => {}
render () { return (
<form onSubmit={this.handleSubmit}>
<input type='text'
value={this.state.username}
onChange={this.updateUsername} />
<button type='submit'>Submit</button>
</form>
)
}
}Le composant non contrôlé stocke les données du formulaire dans le DOM, pas dans le composant React. Nous pouvons utiliser des références pour manipuler des éléments du DOM :
class UnControlledForm extends Component {
handleSubmit = () => {
console.log("Input Value: ", this.input.value)
}
render () { return (
<form onSubmit={this.handleSubmit}>
<input type='text'
ref={(input) => this.input = input} />
<button type='submit'>Submit</button>
</form>
)
}
}De façon inattendue, les composants non contrôlés semblent plus faciles à implémenter. Nous pouvons récupérer directement les données du DOM sans ajouter de code supplémentaire. Cependant, nous ne préconisons pas l'utilisation de composants non contrôlés dans le développement réel, car dans les situations réelles, nous devons envisager une prise en charge plus fonctionnelle telle que la validation de formulaire, l'activation ou la désactivation sélective des clics sur les boutons et les formats de saisie forcés. héberger les données dans React nous aide à mieux remplir ces fonctions de manière déclarative. La raison initiale de l'introduction de React ou d'autres frameworks MVVM est de nous libérer de la lourde manipulation directe du DOM.
7. Quelle est la fonction de ShouldComponentUpdate et pourquoi est-elle si importante ?
shouldComponentUpdate 允许我们手动地判断是否要进行组件更新，根据组件的应用场景设置函数的合理返回值能够帮我们避免不必要的更新。
8、概述下 React 中的事件处理逻辑
为了解决跨浏览器兼容性问题，React 会将浏览器原生事件（Browser Native Event）封装为合成事件（SyntheticEvent）传入设置的事件处理器中。这里的合成事件提供了与原生事件相同的接口，不过它们屏蔽了底层浏览器的细节差异，保证了行为的一致性。另外有意思的是，React 并没有直接将事件附着到子元素上，而是以单一事件监听器的方式将所有的事件发送到顶层进行处理。这样 React 在更新 DOM 的时候就不需要考虑如何去处理附着在 DOM 上的事件监听器，最终达到优化性能的目的。
9、传入 setState 函数的第二个参数的作用是什么？
该函数会在setState函数调用完成并且组件开始重渲染的时候被调用，我们可以用该函数来监听渲染是否完成：
this.setState(
{ username: 'tylermcginnis33' }, () => console.log('setState has finished and the component has re-rendered.')
)10、组件的生命周期
组件的生命周期分成三个状态：
Mounting：已插入真实 DOM Updating：正在被重新渲染 Unmounting：已移出真实 DOM
React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。
componentWillMount()componentDidMount()componentWillUpdate(object nextProps, object nextState)componentDidUpdate(object prevProps, object prevState)componentWillUnmount()
此外，React 还提供两种特殊状态的处理函数。
componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用
本篇文章到这就结束了（想看更多就到PHP中文网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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
