1. Übersicht
Originaltext von der offiziellen Website von React: Hooks sind ein neuer Funktionsvorschlag, mit dem Sie Status- und andere React-Funktionen verwenden können, ohne Klassen schreiben zu müssen.
Ich habe die Gründe für die Verwendung von Hooks zusammengefasst:
1. Lösen Sie die komplexe Codehierarchie in Klassen.
2. Der Lebenszyklus einer Klasse ist komplex.
3. Zustandslose Komponenten werden aufgrund von Arbeitsanforderungen in zustandsbehaftete Komponenten umgewandelt, und die Kosten für die Umwandlung in Klassenkomponenten sind relativ hoch.
2.useState (Komponentenstatus speichern)
Ergänzende Erläuterung: useState ist immer noch eine Speicherkomponente und wird nur einmal beim Erstellen der Komponente initialisiert. Dadurch wird sichergestellt, dass der jedes Mal geänderte Wert gespeichert werden kann. Der Beispielcode führt eine einfache Namensänderung durch, und die Logik ist relativ einfach und kann direkt codiert werden:
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 (Umgang mit Nebenwirkungen )
Lassen Sie uns zunächst verstehen, was Nebenwirkungen sind. Nebenwirkungen bedeuten, dass das Verhalten einer Funktion oder eines Ausdrucks von der Außenwelt abhängt.
Syntax: useEffect(()=>{},[]); Zwei Parameter: Der Parameter ist eine Funktion und die zu verarbeitende Logik wird darin platziert, z. B. Netzwerkanforderungen oder Logikverarbeitung. Parameter zwei Array: abhängiger Zustand; ein leeres Array bedeutet keine Abhängigkeit. Wenn ein leeres Array übergeben wird, bedeutet dies, dass es nur einmal ausgeführt wird. Wenn ein Abhängigkeitszustand übergeben wird, wird die Funktion ausgeführt, die nur den abhängigen Zustand ändert einmal.
Zusätzliche Hinweise: useEffect wird erst aufgerufen, wenn die gesamte Seite gerendert ist. Dies ähnelt dem Lebenszyklus von Klassenkomponenten, ist jedoch nicht genau derselbe. Der Beispielcode stellt eine einfache Netzwerkanfrage:
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>
)
}Wenn Sie beispielsweise bei der useEffect-Löschmethode einen Timer in der useEffect-Rückrufmethode festlegen, sollte dieser zerstört werden, wenn die Komponente verschwindet. Up-Code
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 ( Speicherfunktion )
useCallback(()=>{},[]); Diese Methode gibt eine Funktionsmethode zurück. Parameter eins: Rückruffunktion. Parameter zwei: Abhängigkeitsstatus; ein leeres Array bedeutet keine Abhängigkeit. Wenn ein leeres Array übergeben wird, zeigt dies an wird nur einmal ausgeführt. Wenn der Abhängigkeitsstatus übergeben wird, wird die Funktion, die nur den Abhängigkeitsstatus ändert, einmal ausgeführt und die aktualisierte Funktion wird zurückgegeben.
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. Verwenden Sie Memo
Die Verwendung von useMemo und useCallback ist sehr ähnlich. useCallback führt nicht die erste Parameterfunktion aus, sondern gibt sie an Sie zurück, während useMemo die erste Funktion ausführt und das Ergebnis der Funktionsausführung an Sie zurückgibt.
Laden Sie den Code direkt hoch
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 bindet DOM oder Komponenten und kann auch Werte speichern. useRef verfügt außerdem über eine Speicherfunktion.
Laden Sie den Code direkt hoch
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
Übergeordnete Komponenten übergeben Werte an untergeordnete Komponenten. Es ist relativ einfach und unkompliziert zu programmieren.
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.Verwenden Sie den Reduzierer
Beschreibung: const [state, Dispatch] = useReducer(reducer, initialState);
Alternative zu useState. Akzeptiert (state, action) => newState einen Reduzierertyp und gibt dispatch den aktuellen Status gepaart mit der Methode zurück. (Wenn Sie mit Redux vertraut sind, wissen Sie bereits, wie es funktioniert.), hauptsächlich beim Extrahieren der Methoden zum Ändern des Status.
UseReducer wird in jedem Schritt in Kombination mit useContext verwendet, wodurch die Codeebene reduziert werden kann. Laden Sie den Code direkt hoch
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. Erstellen Sie Ihre eigenen Hooks
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>
)
}