Table des matières
useState
useState est un Hook de React pour ajouter un état dans les composants de fonction. Avec useState, nous pouvons créer et gérer des variables d'état dans les composants de fonction, et chaque fois que les variables d'état sont mises à jour, le composant sera restitué pour afficher le dernier état.
useEffect
useEffect est un autre Hook dans React pour gérer les effets secondaires. Les effets secondaires font référence à toutes les opérations pouvant se produire pendant le rendu des composants, telles que l'accès au DOM, le lancement de requêtes réseau, l'abonnement à des événements, etc. Avec useEffect, nous pouvons effectuer ces opérations après le rendu du composant.
useRef
useRef est utilisé pour créer des références mutables dans les composants de fonction. Il fournit une référence persistante qui nous permet de stocker et d'accéder aux données entre les rendus. Dans l'exemple ci-dessus, nous avons utilisé useRef pour créer divRef, inputRef et buttonRef, référençant respectivement les éléments div, input et button.
exemple de code
import {Ref, useEffect, useRef} from "react";
// @ts-ignore
import React from "react";
const Demo=React.forwardRef((props:any,ref:Ref<HTMLInputElement>)=>{
return (
<>
<input type="text" ref={ref}/>
</>
)
})
function Contact() {
const divRef=useRef<HTMLDivElement>(null);
const inputRef=useRef<HTMLInputElement>(null);
const buttonRef=useRef<HTMLButtonElement>(null);
useEffect(()=>{
console.log(inputRef.current)
if(inputRef.current) {
inputRef.current.focus()
}
console.log(buttonRef.current)
})
function changeContent(){
if(divRef.current){
divRef.current.innerHTML="<h1>hello</h1>"
}
}
return (
<div>
<h1>Contact</h1>
<br/>
<Demo ref={inputRef}/>
<button onClick={()=>{
if(inputRef.current){
inputRef.current.focus()
}
}}>focus</button>
<div ref={divRef} onClick={changeContent}>click</div>
<div dangerouslySetInnerHTML={
{__html:"<h1>hekko</h1>"}}></div>
<input type="text" ref={inputRef}/>
<button ref={buttonRef}>button</button>
</div>
);
}
export default Contact;
dangerouslySetInnerHTML
dangereusementSetInnerHTML est une propriété dans React qui est utilisée pour insérer des chaînes HTML dans des composants. Il fournit un moyen de contourner le mécanisme d'échappement par défaut de React, mais pose également un risque potentiel pour la sécurité et doit être utilisé avec prudence.
生命周期函数
constructor
Il s'agit du constructeur du composant, qui est appelé lors de la création du composant. Dans le constructeur, nous effectuons généralement certaines opérations d'initialisation, telles que la définition de l'état initial, la liaison des gestionnaires d'événements, etc. Dans le constructeur, l'état du composant peut être initialisé via this.state.
componentDidMount
Il s'agit de la fonction de cycle de vie du composant, qui est appelée après le rendu du composant. Dans composantDidMount, nous effectuons généralement certaines opérations asynchrones, telles que des demandes de données, des événements d'abonnement, etc. Dans cette fonction, l'état du composant peut être modifié, ce qui entraînera un nouveau rendu du composant.
static getDerivedStateFromProps
Il s'agit d'une fonction statique qui calcule et renvoie un nouvel état en fonction des accessoires transmis et de l'état actuel. getDerivedStateFromProps est appelé lorsque le composant est créé et mis à jour, et est utilisé pour mettre à jour l'état du composant en fonction des accessoires transmis.
devraitComponentUpdate
Il s'agit d'une fonction de cycle de vie utilisée pour déterminer si le composant doit être restitué. Dans ShouldComponentUpdate, nous pouvons décider de restituer le composant en fonction des nextProps et nextState entrants. S'il renvoie vrai, le composant sera restitué ; s'il renvoie faux, le composant ne sera pas restitué.
composantDidUpdate
Il s'agit de la fonction de cycle de vie du composant, qui est appelée après la mise à jour du composant. Dans composantDidUpdate, nous effectuons généralement certains effets secondaires, tels que la mise à jour du DOM, la demande de données, etc. Dans cette fonction, certaines conditions peuvent être jugées en fonction de prevProps et prevState, et les opérations correspondantes peuvent être effectuées.
composantWillUnmount
Il s'agit de la fonction de cycle de vie du composant, qui est appelée lorsque le composant est sur le point d'être démonté. Dans composantWillUnmount, nous effectuons généralement certaines opérations de nettoyage, telles que la désinscription, l'effacement des minuteries, etc. Dans cette fonction, l'opération setState doit être évitée, car le composant est sur le point d'être démonté et n'a plus besoin de mettre à jour l'état.
Ce qui précède est une introduction à certaines API et fonctions de cycle de vie courantes dans React. En utilisant ces API et fonctions de cycle de vie de manière raisonnable, nous pouvons créer des applications React de manière plus flexible et plus efficace. Mais il convient de noter qu'avec le développement continu de React, certaines fonctions du cycle de vie peuvent être abandonnées ou remplacées, veuillez faire les choix correspondants en fonction de la version et des exigences spécifiques de React. J'espère que ce blog vous aidera à apprendre et à utiliser React !
Exemple de code :
import {Component} from "react";
import {Button} from "antd";
interface IState{
counter:number
}
export default class Index extends Component <any,any>{
constructor(props: any, context: any) {
super(props, context);
this.state={
counter:0
}
console.log("constructor")
}
componentDidMount() {
console.log("componentDidMount")
}
static getDerivedStateFromProps(props: any, state: any) {
console.log("getDerivedStateFromProps")
return null
}
shouldComponentUpdate(nextProps: Readonly<any>, nextState: Readonly<any>, nextContext: any): boolean {
console.log("shouldComponentUpdate")
return nextState.counter!<=5
}
add=()=>{
this.setState({
counter:this.state.counter+1
})
}
componentDidUpdate(prevProps: Readonly<any>, prevState: Readonly<any>, snapshot?: any) {
console.log("componentDidUpdate")
}
componentWillUnmount() {
console.log("componentWillUnmount")
}
render(){
console.log("render")
return(
<>
<div>{this.state.counter}</div>
<Button onClick={this.add}>add</Button></>
)
}
}