1. Vue d'ensemble
Texte original du site officiel de React : Les hooks sont une nouvelle proposition de fonctionnalités qui vous permet d'utiliser l'état et d'autres fonctionnalités de React sans écrire de classes.
J'ai résumé les raisons d'utiliser Hooks :
1. Résolvez la hiérarchie complexe du code dans les classes.
2. Le cycle de vie d’une classe est complexe.
3. En raison des exigences de travail, les composants sans état sont remplacés par des composants avec état. Le coût de leur conversion en composants de classe est relativement élevé.
2.useState (enregistrer l'état du composant)
Explication complémentaire : useState est toujours un composant mémoire et n'est initialisé qu'une seule fois lors de la création du composant, ce qui garantit que la valeur modifiée à chaque fois pourra être sauvegardée. L'exemple de code effectue un simple changement de nom, et la logique est relativement simple et peut être directement codée :
import React, { useState } from 'react'
export default function App() {
const [name,setName]=useState('张三')
return (
<div>App-{name}
<button onClick={()=>{
setName('李四') //把name张三修改成了李四
console.log(name);
}}>修改</button>
</div>
)
}3.useEffect (gestion des effets secondaires )
Commençons par comprendre ce que sont les effets secondaires. Les effets secondaires signifient que le comportement d’une fonction ou d’une expression dépend du monde extérieur.
Syntaxe : useEffect(()=>{},[]); Deux paramètres : un paramètre et une fonction pour mettre la logique à traiter, comme les requêtes réseau ou le traitement logique. Tableau du paramètre 2 : état dépendant ; un tableau vide signifie aucune dépendance. Si un tableau vide est transmis, cela signifie qu'il ne sera exécuté qu'une seule fois. Si un état de dépendance est transmis, la fonction qui modifie uniquement l'état dépendant sera exécutée une fois.
Notes supplémentaires : useEffect ne sera pas appelé tant que la page entière n'est pas rendue, ce qui est similaire au cycle de vie des composants de classe, mais pas exactement le même. L'exemple de code effectue une simple requête réseau :
import React, { useEffect, useState } from 'react'
import axios from 'axios'
export default function App() {
const [list, setList] = useState([])
useEffect(() => {
axios({
method: 'get',
url: 'move.json'
}).then(res => {
console.log(res.data.data);
setList(res.data.data.films)
})
},
[])//传空数组，表示不依赖任何东西
return (
<div>
<ul>
{list.map(item => <li key={item.filmId}>{item.name}</li>)}
</ul>
</div>
)
}La méthode de suppression useEffect, par exemple, si vous définissez une minuterie dans la méthode de rappel useEffect, elle doit être détruite lorsque le composant disparaît. Code vers le haut
import React, { useEffect, useState } from 'react'
export default function App() {
const [show, setShow] = useState(true)
return (
<div>
<button onClick={() => {
setShow(false)
}}>销毁</button>
{show ? <Child></Child> : ""}
</div>
)
}
function Child() {
let timer = null
const [name, setName] = useState('张三')
useEffect(() => {
console.log(name);
timer = setInterval(() => {
console.log('定时器');
}, 1000)
//销毁是执行一次，依赖更新一次也会执行一次。
return () => {
clearInterval(timer)
timer = null
console.log('xiaohui');
}
}, [name])
return (
<div><button onClick={() => {
setName('李四')
}}>Child</button></div>
)
}
4. useCallback ( fonction mémoire )
useCallback(()=>{},[]); Cette méthode renvoie une méthode de fonction. Premier paramètre : fonction de rappel. Paramètre deux : statut de dépendance ; un tableau vide signifie aucune dépendance. Si un tableau vide est transmis, indique qu'il ne sera exécuté qu'une seule fois. Si l'état de dépendance est transmis, la fonction qui modifie uniquement l'état de dépendance sera exécutée une fois et la fonction mise à jour sera renvoyée.
import React, { useCallback, useState } from 'react'
export default function App() {
const [name,setName]=useState('张三')
let sum=0;
console.log(sum);
const handleAdd=useCallback(()=>{
console.log(sum++);
setName('lisi'+sum)
},[])
//只有name改变后， 这个函数才会重新声明一次，
//如果传入空数组， 那么就是第一次创建后就被缓存， 如果name后期改变了,拿到的还是老的name。
//如果不传第二个参数，每次都会重新声明一次，拿到的就是最新的name
return (
<div>
app-{name}
<button onClick={ handleAdd}>anniu </button></div>
)
}
5. utilisez Mémo
L'utilisation de useMemo et useCallback est très similaire. useCallback n'exécutera pas la première fonction paramètre, mais vous la renverra, tandis que useMemo exécutera la première fonction et vous renverra le résultat de l'exécution de la fonction.
Téléchargez directement le code
import React, { useMemo, useState } from 'react'
export default function App() {
const [name, setName] = useState('xiaoming')
const handleName = useMemo(() => name.toLocaleUpperCase(), [name])
return (
<div>App-{handleName}
<button onClick={()=>{
setName('lisi')
}}>gaibian</button>
</div>
)
}
6.useRef
useRef lie le DOM ou les composants et peut également enregistrer des valeurs. useRef a également une fonction de mémoire.
Téléchargez directement le code
import React, { useRef } from 'react'
export default function App() {
//绑定dom或者组件
const ref = useRef()
//useref保存值
const myCount=useRef(0)
return (
<div>
<input ref={ref}></input>
<button onClick={() => {
console.log(ref.current.value);
ref.current.value = '';
myCount.current++;
console.log(myCount.current);
}}>按钮</button>
</div>
)
}7.useContext
Les composants parents transmettent des valeurs aux composants enfants. C’est relativement simple et direct à coder.
import React, { useContext } from 'react'
const Context =React.createContext()
export default function App() {
return (
<Context.Provider
value={
{name:'lisi'}}>
<div>
<Ietm></Ietm>
</div>
</Context.Provider>
)
}
function Ietm(){
const value=useContext(Context)
return (
<div>ietm-{value.name}</div>
)
}8.useRéducteur
Remarque : const [state, dispatch] = useReducer(reducer, initialState);
Alternative à useState. Accepte (state, action) => newState un réducteur de type et renvoie dispatch l'état actuel associé à la méthode. (Si vous connaissez Redux, vous savez déjà comment cela fonctionne.), principalement en extrayant les méthodes de modification d'état.
UseReducer est utilisé en combinaison avec useContext à chaque étape, ce qui peut réduire le niveau de code. Téléchargez directement le code
import React, { useContext, useReducer } from 'react'
//preState 老状态 action改变的类型
function reducer(preState, action) {
let newSate = { ...preState };
switch (action.type) {
case "add":
newSate.count++
return newSate;
case "sub":
newSate.count--
return newSate;
}
return preState;
}
const initialState = {
count: 0
}
const Context = React.createContext()
export default function App() {
const [state, dispatch] = useReducer(reducer, initialState)
return (
<Context.Provider value={
{ state, dispatch }}>
<div>
<Child></Child>
</div>
</Context.Provider>
)
}
function Child() {
const { state, dispatch } = useContext(Context)
return (
<div>
计数器：{state.count}
<div>
<button
onClick={() => {
dispatch({ type: "add" })
}}
>+</button>
<button
onClick={() => {
dispatch({ type: "sub" })
}}
>-</button>
</div>
</div>
)
}
9. Construisez vos propres crochets
import React, { useEffect, useState } from 'react'
function useToLocaleUpperCase(text) {
const [name, setName] = useState(text)
useEffect(() => {
setName(name.toLocaleUpperCase())
}, [])
return { name };
}
export default function App() {
const { name } = useToLocaleUpperCase('zhansan')
return (
<div>App-{name}
<Child></Child>
</div>
)
}
function Child() {
const { name } = useToLocaleUpperCase('lisi')
return (
<div>App-{name}</div>
)
}