Adakah anda tahu Hooks in React? Artikel ini akan memberi anda pemahaman yang mendalam tentang React Hooks. Saya harap ia akan membantu anda!
Cangkuk digunakan untuk menggunakan keadaan dan ciri React yang lain tanpa menulis kelas. Jadi apakah sebenarnya Hooks, mengapa kita perlu menggunakan Hooks, apakah Hooks biasa yang disediakan oleh React, dan bagaimana untuk menyesuaikan Hooks Perkara berikut akan mendedahkannya kepada anda satu demi satu? [Cadangan berkaitan: Tutorial video Redis]
Cangkuk diterjemahkan sebagai cangkuk ialah fungsi dalam komponen fungsi yang bertanggungjawab untuk mengaitkan ke dalam fungsi luaran.
React menyediakan beberapa cangkuk biasa, dan React juga menyokong cangkuk tersuai ini digunakan untuk memperkenalkan fungsi luaran kepada fungsi.
Apabila kita perlu memperkenalkan fungsi luaran ke dalam komponen, kita boleh menggunakan cangkuk yang disediakan oleh React atau menyesuaikan cangkuk.
Sebagai contoh, jika anda memperkenalkan fungsi mengurus keadaan dalam komponen, anda boleh menggunakan fungsi useState Penggunaan useState akan diperkenalkan secara terperinci di bawah.
Terdapat dua sebab utama untuk menggunakan Cangkuk:
Sebelum Hooks muncul, React terpaksa meminjam corak reka bentuk yang kompleks seperti komponen tertib lebih tinggi dan memaparkan prop untuk melaksanakan logik. Guna semula, tetapi komponen tertib tinggi akan menjana nod komponen berlebihan, menjadikan penyahpepijatan lebih rumit.
Cangkuk membenarkan kami menggunakan semula logik keadaan tanpa mengubah suai struktur komponen Penggunaan Cangkuk tersuai akan diperkenalkan secara terperinci di bawah.
Dalam komponen kelas, kod logik perniagaan yang sama bertaburan dalam fungsi kitaran hayat komponen yang berbeza dan Cangkuk boleh membuat Kod untuk logik perniagaan yang sama diagregatkan bersama untuk memisahkan logik perniagaan dengan jelas dan menjadikan kod lebih mudah difahami dan diselenggara.
useState ialah Cangkuk yang membolehkan anda menambah keadaan dalam komponen fungsi React.
Contoh penggunaan adalah seperti berikut:
import React, { useState } from 'react';
function Example() {
// 声明一个叫 "count" 的 state 变量
const [count, setCount] = useState(0);
// ...Kod di atas mengisytiharkan kiraan pembolehubah keadaan dengan nilai awal 0 dan mengemas kini kiraan semasa dengan memanggil setCount.
useEffect membolehkan anda melakukan operasi kesan sampingan dalam komponen fungsi.
Kesan sampingan merujuk kepada sekeping kod yang tiada kaitan dengan hasil pelaksanaan semasa termasuk pemerolehan data, menetapkan langganan dan menukar DOM dalam komponen React secara manual.
useEffect boleh menerima dua parameter, kodnya adalah seperti berikut:
useEffect(callback, dependencies)
Parameter pertama ialah panggilan balik fungsi yang akan dilaksanakan, dan parameter kedua ialah kebergantungan tatasusunan kebergantungan pilihan.
Kebergantungan adalah pilihan Jika tidak dinyatakan, panggilan balik akan dilaksanakan selepas setiap komponen fungsi dilaksanakan, ia hanya akan dilaksanakan apabila nilai dalam kebergantungan akan dilaksanakan.
Contoh penggunaan adalah seperti berikut:
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 更新时执行该副作用
// ...Kod di atas menggunakan useEffect untuk dilaksanakan apabila kiraan pergantungan dikemas kini, fungsi kesan sampingan dilaksanakan dan hasil pelaksanaan terakhir dibersihkan oleh mengembalikan fungsi panggil balik.
Selain itu, useEffect menyediakan empat pemasaan untuk melaksanakan kesan sampingan:
Fungsi panggil balik yang ditakrifkan oleh useCallback hanya akan mengisytiharkan semula fungsi panggil balik ini apabila kebergantungan berubah, dengan itu memastikan komponen Duplikat panggil balik fungsi tidak akan dibuat. Dan komponen yang menerima fungsi panggil balik ini sebagai atribut tidak akan perlu dipaparkan semula dengan kerap.
Contoh penggunaan adalah seperti berikut:
const memoizedCallback = useCallback(() => {
doSomething(a, b)
}, [a, b])Kod di atas akan mengisytiharkan semula fungsi panggil balik hanya apabila kebergantungan a dan b berubah.
Fungsi penciptaan yang ditakrifkan oleh useMemo hanya akan dikira semula apabila kebergantungan berubah, yang membantu untuk tidak Akan ada pengiraan mahal yang berulang , dan komponen yang menerima nilai terkira ini sebagai sifat tidak perlu dipaparkan semula dengan kerap.
Contoh penggunaan adalah seperti berikut:
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b])
Kod di atas hanya akan dikira semula apabila kebergantungan a dan b berubah.
useRef mengembalikan objek ref yang berterusan sepanjang hayat komponen.
Dia ada 2 kegunaan:
保存 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>
</>
)
}以上代码通过 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>
)
}以上代码通过 useRef 创建了一个变量名为 timer 的 ref 对象，该对象可以在跨组件渲染时调用，在开始计时时新建计时器，在暂停计时时清空计时器。
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>
}以上代码通过 useContext 取得了 App 组件中定义的 Context，做到了跨层次组件的数据共享。
useReducer 用来引入 Reducer 功能。
示例如下：
const [state, dispatch] = useReducer(reducer, initialState)
它接受 Reducer 函数和状态的初始值作为参数，返回一个数组。数组的第一个成员是状态的当前值，第二个成员是发送 action 的 dispatch 函数。
通过自定义 Hooks，可以将组件逻辑提取到可重用的函数中。
自定义 Hooks 就是函数，它有 2 个特征区分于普通函数：
示例如下：
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()
}以上代码通过自定义 Hooks useCounter，轻松的在 MyComponent1 组件和 MyComponent2 组件之间复用业务逻辑。
React 官方提供了 react-use 库，其中封装了大量可直接使用的自定义 Hooks，帮助我们简化组件内部逻辑，提高代码可读性、可维护性。
其中我们常用的自定义 Hooks 有：
可至 react-use 官网学习使用。
本文从 Hooks 究竟是什么，为什么要使用 Hooks，React 提供了哪些常用 Hooks，以及如何自定义 Hooks 4 个方面介绍了 React Hooks，相信大家对 React Hooks 已经有了更加深入的理解。
希望能对你有所帮助，感谢阅读～
更多编程相关知识，请访问：编程入门！！
Atas ialah kandungan terperinci Artikel ini akan memberi anda pemahaman yang mendalam tentang React Hooks!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
