Kennen Sie Hooks in React? Dieser Artikel wird Ihnen ein tiefgreifendes Verständnis von React Hooks vermitteln. Ich hoffe, er wird Ihnen hilfreich sein!
Vorwort
Hooks werden verwendet, um Status- und andere React-Funktionen zu verwenden, ohne Klassen zu schreiben. Was genau sind Hooks, warum sollten wir Hooks verwenden, welche allgemeinen Hooks bietet React und wie werden Hooks im Folgenden einzeln vorgestellt? [Verwandte Empfehlungen: Redis-Video-Tutorial]
Was sind Hooks?
Hooks werden als Hooks übersetzt und sind Funktionen innerhalb von Funktionskomponenten, die für die Verknüpfung mit externen Funktionen verantwortlich sind.
React bietet einige gängige Hooks und React unterstützt auch benutzerdefinierte Hooks. Diese Hooks werden verwendet, um externe Funktionen in Funktionen einzuführen.
Wenn wir externe Funktionen in eine Komponente einführen müssen, können wir die von React bereitgestellten Hooks verwenden oder Hooks anpassen.
Wenn Sie beispielsweise die Funktion zum Verwalten des Status in einer Komponente einführen, können Sie die Funktion useState verwenden. Die Verwendung von useState wird im Folgenden ausführlich vorgestellt.
Warum Hooks verwenden? Es gibt zwei Hauptgründe für die Verwendung von Hooks:
Vereinfachen Sie die Wiederverwendung von Logik.
- Machen Sie komplexe Komponenten leichter verständlich.
-
1. Vereinfachen Sie die Wiederverwendung von Logik
Vor dem Aufkommen von Hooks musste React komplexe Entwurfsmuster wie hochrangige Komponenten und Render-Requisiten ausleihen, um eine logische Wiederverwendung zu erreichen, aber hochrangige Komponenten würden redundante Komponentenknoten erzeugen. , was das Debuggen komplexer macht.
Hooks ermöglichen uns die Wiederverwendung der Statuslogik, ohne die Komponentenstruktur zu ändern. Die Verwendung benutzerdefinierter Hooks wird im Folgenden ausführlich vorgestellt.
2. Komplexe Komponenten leichter verständlich machen
In Klassenkomponenten ist der Code für dieselbe Geschäftslogik auf verschiedene Lebenszyklusfunktionen der Komponente verteilt, und Hooks können den Code für dieselbe Geschäftslogik zusammenfassen Die Geschäftslogik ist klar getrennt, wodurch der Code einfacher zu verstehen und zu warten ist.
4. Häufig verwendete Hooks
1. useState
useState ist ein Hook, mit dem Sie Status in React-Funktionskomponenten hinzufügen können.
Verwendungsbeispiele sind wie folgt:
import React, { useState } from 'react';
function Example() {
// 声明一个叫 "count" 的 state 变量
const [count, setCount] = useState(0);
// ...Nach dem Login kopieren
Der obige Code deklariert einen Zustandsvariablenzähler mit einem Anfangswert von 0 und aktualisiert den aktuellen Zähler durch Aufruf von setCount.
2. useEffect
useEffect ermöglicht Ihnen die Durchführung von Nebeneffektoperationen in Funktionskomponenten.
Nebenwirkungen beziehen sich auf einen Codeabschnitt, der nichts mit den aktuellen Ausführungsergebnissen zu tun hat, einschließlich Datenerfassung, Festlegen von Abonnements und manuelles Ändern des DOM in React-Komponenten.
useEffect kann zwei Parameter empfangen. Der Code lautet wie folgt:
useEffect(callback, dependencies)
Nach dem Login kopieren
Der erste Parameter ist der auszuführende Funktionsrückruf und der zweite Parameter sind die optionalen Abhängigkeiten des Array-Abhängigkeiten.
Die Abhängigkeit ist optional. Wenn sie nicht angegeben ist, wird der Rückruf ausgeführt, nachdem jede Funktionskomponente ausgeführt wurde. Wenn sie angegeben ist, wird sie nur ausgeführt, wenn sich der Wert in der Abhängigkeit ändert.
Verwendungsbeispiele sind wie folgt:
function Example() {
const [count, setCount] = useState(0);
// Similar to componentDidMount and componentDidUpdate:
useEffect(() => {
// Update the document title using the browser API
document.title = `You clicked ${count} times`;
return () => {
// 可用于做清除，相当于 class 组件的 componentWillUnmount
}
}, [count]); // 指定依赖项为 count，在 count 更新时执行该副作用
// ...Nach dem Login kopieren
Der obige Code verwendet useEffect, um zu implementieren, wann die Abhängigkeitsanzahl aktualisiert wird, die Nebeneffektfunktion ausgeführt wird und das letzte Ausführungsergebnis durch die Rückgabe der Rückruffunktion gelöscht wird.
Darüber hinaus bietet useEffect vier Zeitpunkte für die Ausführung von Nebeneffekten:
Ausgeführt nach jedem Rendern- : Der zweite Abhängigkeitsparameter wird nicht bereitgestellt. Zum Beispiel useEffect(() => {});
Wird nur nach dem ersten Rendern ausgeführt- : Geben Sie ein leeres Array als Abhängigkeit an. Zum Beispiel useEffect(() => {}, []);
Zum ersten Mal und nach Änderung der Abhängigkeiten ausgeführt- : Stellen Sie ein Array von Abhängigkeiten bereit. Zum Beispiel useEffect(() => {}, [deps]);
Nach dem Aushängen der Komponente ausführen - : Eine Rückruffunktion zurückgeben. Zum Beispiel useEffect() => { return () =>
3. Die durch useCallback
useCallback definierte Callback-Funktion deklariert die Callback-Funktion nur dann neu, wenn sich die Abhängigkeiten ändern, wodurch sichergestellt wird, dass die
-Komponente keine doppelten Callback-Funktionen erstellt
. Und die Komponente, die diese Rückruffunktion als Attribut empfängt, muss nicht häufig neu gerendert werden. Verwendungsbeispiele sind wie folgt: const memoizedCallback = useCallback(() => {
doSomething(a, b)
}, [a, b])Nach dem Login kopieren
4. Die von useMemo definierte Erstellungsfunktion wird nur dann neu berechnet, wenn sich eine Abhängigkeit ändert, was dazu beiträgt, wiederholte Berechnungen mit hohem Overhead zu vermeiden und diesen berechneten Wert jedes Mal zu erhalten, wenn sie gerendert wird müssen nicht häufig neu gerendert werden.
Verwendungsbeispiele sind wie folgt:
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b])
Nach dem Login kopieren
5. useRefuseRef gibt ein Ref-Objekt zurück, das während des gesamten Lebenszyklus der Komponente bestehen bleibt.
Er hat 2 Verwendungsmöglichkeiten:
- 保存 DOM 节点的引用；
- 在多次渲染之间共享数据。
保存 DOM 节点的引入使用示例如下：
function TextInputWithFocusButton() {
const inputEl = useRef(null)
const onButtonClick = () => {
// `current` 指向已挂载到 DOM 上的文本输入元素
inputEl.current.focus()
}
return (
<>
<input ref={inputEl} type='text' />
<button onClick={onButtonClick}>Focus the input</button>
</>
)
}Nach dem Login kopieren
以上代码通过 useRef 创建了 ref 对象，保存了 DOM 节点的引用，可以对 ref.current 做 DOM 操作。
在多次渲染之间共享数据示例如下：
import React, { useState, useCallback, useRef } from 'react'
export default function Timer() {
// 定义 time state 用于保存计时的累积时间
const [time, setTime] = useState(0)
// 定义 timer 这样一个容器用于在跨组件渲染之间保存一个变量
const timer = useRef(null)
// 开始计时的事件处理函数
const handleStart = useCallback(() => {
// 使用 current 属性设置 ref 的值
timer.current = window.setInterval(() => {
setTime((time) => time + 1)
}, 100)
}, [])
// 暂停计时的事件处理函数
const handlePause = useCallback(() => {
// 使用 clearInterval 来停止计时
window.clearInterval(timer.current)
timer.current = null
}, [])
return (
<div>
{time / 10} seconds.
<br />
<button onClick={handleStart}>Start</button>
<button onClick={handlePause}>Pause</button>
</div>
)
}Nach dem Login kopieren
以上代码通过 useRef 创建了一个变量名为 timer 的 ref 对象，该对象可以在跨组件渲染时调用，在开始计时时新建计时器，在暂停计时时清空计时器。
6. useContext
useContext 用于接收一个 context 对象并返回该 context 的值，可以实现跨层级的数据共享。
示例如下：
// 创建一个 context 对象
const MyContext = React.createContext(initialValue)
function App() {
return (
// 通过 Context.Provider 传递 context 的值
<MyContext.Provider value='1'>
<Container />
</MyContext.Provider>
)
}
function Container() {
return <Test />
}
function Test() {
// 获取 Context 的值
const theme = useContext(MyContext) // 1
return <div></div>
}Nach dem Login kopieren
以上代码通过 useContext 取得了 App 组件中定义的 Context，做到了跨层次组件的数据共享。
7. useReducer
useReducer 用来引入 Reducer 功能。
示例如下：
const [state, dispatch] = useReducer(reducer, initialState)
Nach dem Login kopieren
它接受 Reducer 函数和状态的初始值作为参数，返回一个数组。数组的第一个成员是状态的当前值，第二个成员是发送 action 的 dispatch 函数。
五、自定义 Hooks
通过自定义 Hooks，可以将组件逻辑提取到可重用的函数中。
1. 如何创建自定义 Hooks？
自定义 Hooks 就是函数，它有 2 个特征区分于普通函数：
- 名称以 “use” 开头；
- 函数内部调用其他的 Hook。
示例如下：
import { useState, useCallback } from 'react'
function useCounter() {
// 定义 count 这个 state 用于保存当前数值
const [count, setCount] = useState(0)
// 实现加 1 的操作
const increment = useCallback(() => setCount(count + 1), [count])
// 实现减 1 的操作
const decrement = useCallback(() => setCount(count - 1), [count])
// 重置计数器
const reset = useCallback(() => setCount(0), [])
// 将业务逻辑的操作 export 出去供调用者使用
return { count, increment, decrement, reset }
}
// 组件1
function MyComponent1() {
const { count, increment, decrement, reset } = useCounter()
}
// 组件2
function MyComponent2() {
const { count, increment, decrement, reset } = useCounter()
}Nach dem Login kopieren
以上代码通过自定义 Hooks useCounter，轻松的在 MyComponent1 组件和 MyComponent2 组件之间复用业务逻辑。
2. 自定义 Hooks 库 - react-use
React 官方提供了 react-use 库，其中封装了大量可直接使用的自定义 Hooks，帮助我们简化组件内部逻辑，提高代码可读性、可维护性。
其中我们常用的自定义 Hooks 有：
- useLocation 和 useSearchParam：跟踪页面导航栏位置状态；
- useScroll：跟踪 HTML 元素的滚动位置；
- useScrolling：跟踪 HTML 元素是否正在滚动；
- useAsync, useAsyncFn, and useAsyncRetry：解析一个 async 函数；
- useTitle：设置页面的标题。
可至 react-use 官网学习使用。
六、小结
本文从 Hooks 究竟是什么，为什么要使用 Hooks，React 提供了哪些常用 Hooks，以及如何自定义 Hooks 4 个方面介绍了 React Hooks，相信大家对 React Hooks 已经有了更加深入的理解。
希望能对你有所帮助，感谢阅读～
更多编程相关知识，请访问：编程入门！！
Das obige ist der detaillierte Inhalt vonDieser Artikel vermittelt Ihnen ein tiefgreifendes Verständnis von React Hooks!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
