小米平板5 Pro 12.4簡(jiǎn)評(píng)：多專多能 兼顧影音娛樂(lè)的大屏利器
疫情帶來(lái)了網(wǎng)課，網(wǎng)課盤活了安卓平板，安卓平板市場(chǎng)雖然中途停滯了幾年，但好的一點(diǎn)就是停滯的這幾年行業(yè)又有了新的發(fā)展方向，例如超窄邊框、高刷新率、多攝鏡頭組合等，這就讓安卓
譯者 | 李睿
審校 | 重樓
React是用于構(gòu)建用戶界面的一個(gè)流行JavaScript庫(kù)，多年來(lái)已經(jīng)發(fā)生了重大變化和改進(jìn)。React中最具顛覆性的新特性之一就是引入了Hooks。React Hooks徹底改變了開(kāi)發(fā)者在函數(shù)組件中管理狀態(tài)和生命周期的方式。在這個(gè)全面的指南中，將深入研究React Hooks的世界，探索它們的優(yōu)點(diǎn)、用例，以及如何利用它們來(lái)編寫(xiě)更干凈、更易于維護(hù)的React代碼。
由Facebook公司開(kāi)發(fā)的React已經(jīng)成為構(gòu)建現(xiàn)代交互式Web應(yīng)用程序的首選庫(kù)。傳統(tǒng)上，React組件被編寫(xiě)為具有復(fù)雜狀態(tài)和生命周期管理的類。然而，隨著React 16.8在2019年初的發(fā)布，React團(tuán)隊(duì)引入了Hooks，它使開(kāi)發(fā)人員能夠在函數(shù)組件中使用狀態(tài)和其他React特性。React范式的這種轉(zhuǎn)變對(duì)開(kāi)發(fā)人員編寫(xiě)和構(gòu)建代碼的方式產(chǎn)生了深遠(yuǎn)的影響。
在這一指南中，將探索React Hooks的各個(gè)方面，從理解它們的核心概念到在現(xiàn)實(shí)場(chǎng)景中如何有效地使用。無(wú)論是React新手還是經(jīng)驗(yàn)豐富的開(kāi)發(fā)人員，這一指南都旨在提供對(duì)React Hooks的全面了解。
React Hooks是讓用戶從函數(shù)組件中“掛鉤”React狀態(tài)和生命周期特性的函數(shù)。在Hooks出現(xiàn)之前，這些特性只能在類組件中使用。有了Hooks之后，函數(shù)組件現(xiàn)在能夠以更直接和更有表現(xiàn)力的方式管理狀態(tài)、執(zhí)行副作用和訪問(wèn)場(chǎng)景。
React Hooks背后的主要?jiǎng)訖C(jī)是簡(jiǎn)化跨組件的重用有狀態(tài)邏輯，并完全消除對(duì)類組件的需求。Hooks是遵循命名約定的函數(shù)：它們都以u(píng)se開(kāi)頭。React提供了幾個(gè)內(nèi)置Hooks，可以創(chuàng)建自己的自定義Hooks來(lái)封裝可重用邏輯。
以下探索一下關(guān)鍵的Hook和它們的用例。
在深入了解React Hooks的細(xì)節(jié)之前，重要的是要了解引入它們背后的動(dòng)機(jī)：
在類組件中，組件之間共享有狀態(tài)邏輯通常涉及復(fù)雜的模式，例如高階組件(HOC)和呈現(xiàn)props。這可能導(dǎo)致“包裝地獄”(wrapper hell)，并使代碼更難理解。Hooks允許用戶重用有狀態(tài)邏輯，而無(wú)需更改組件層次結(jié)構(gòu)。這使得代碼更模塊化，更易于維護(hù)。
隨著類組件所包含的邏輯的增長(zhǎng)，類組件會(huì)變得很麻煩。Hooks允許用戶根據(jù)組件封裝的邏輯將組件拆分為更小、更集中的函數(shù)。這使得代碼更容易閱讀和維護(hù)。
類組件具有更陡峭的學(xué)習(xí)曲線，對(duì)于具有函數(shù)式編程背景的開(kāi)發(fā)人員來(lái)說(shuō)可能不太直觀。Hooks提供了一種更實(shí)用的方式來(lái)使用React，使開(kāi)發(fā)人員更容易理解和使用該庫(kù)。
類組件通常需要為生命周期方法和綁定編寫(xiě)重復(fù)的代碼。Hooks消除了很多這樣的樣板文件，產(chǎn)生了更干凈、更簡(jiǎn)潔的代碼。
以下從基本構(gòu)建塊開(kāi)始走上React Hooks之旅：
useState Hooks允許函數(shù)組件管理狀態(tài)。它獲取一個(gè)初始狀態(tài)值，并返回一個(gè)包含當(dāng)前狀態(tài)的數(shù)組和一個(gè)用于更新?tīng)顟B(tài)的函數(shù)。這里有一個(gè)基本的例子：
JavaScript import React, { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); return ( <div> <p>Count: {count}</p> <button onClick={() => setCount(count + 1)}>Increment</button> </div> ); } export default Counter;在本例中，使用useState初始化了一個(gè)初始值為0的計(jì)數(shù)狀態(tài)變量。當(dāng)點(diǎn)擊“count”按鈕時(shí)，可以使用setCount函數(shù)更新計(jì)數(shù)狀態(tài)。
useEffect Hooks使用戶能夠在函數(shù)組件中執(zhí)行副作用。副作用包括數(shù)據(jù)獲取、DOM操作等。useEffect有兩個(gè)參數(shù)：一個(gè)包含副作用代碼的函數(shù)和一個(gè)可選的依賴項(xiàng)數(shù)組。
以下是一個(gè)在組件掛載時(shí)，從API獲取數(shù)據(jù)的例子：
JavaScript import React, { useState, useEffect } from 'react'; function DataFetching() { const [data, setData] = useState(null); useEffect(() => { fetch('https://api.example.com/data').then(response => response.json()).then(data => setData(data)); }, []); // Empty dependency array means this effect runs once return (<div>{data ? (<ul> {data.map(item => <li key={item.id}>{item.name}</li>)}</ul>) : (<p>Loading data...</p> )} </div> ); } export default DataFetching;在這個(gè)例子中，useEffect Hook在組件安裝時(shí)從API獲取數(shù)據(jù)（由于依賴項(xiàng)數(shù)組為空）。提取的數(shù)據(jù)存儲(chǔ)在數(shù)據(jù)狀態(tài)變量中，組件在可用時(shí)呈現(xiàn)它。
這些基本的Hook為管理函數(shù)組件中的狀態(tài)和執(zhí)行副作用提供了基礎(chǔ)。然而，React提供了各種額外的Hooks來(lái)處理更復(fù)雜的場(chǎng)景。
React提供了幾個(gè)內(nèi)置的Hook來(lái)滿足組件邏輯的不同方面。以下是一些常用的附加鉤子：
useContext Hooks允許函數(shù)組件訪問(wèn)父組件的場(chǎng)景。提供了一種跨組件樹(shù)共享值(如主題或身份驗(yàn)證狀態(tài))的方法，而無(wú)需人工傳遞props。
下面是一個(gè)使用useContext來(lái)訪問(wèn)組件中的主題的例子：
JavaScript import React, { useContext } from 'react'; const ThemeContext = React.createContext('light'); function ThemedButton() { const theme = useContext(ThemeContext); return ( <button className={`btn btn-${theme}`}>Themed Button</button> ); } export default ThemedButton;在這個(gè)例子中，useContext從ThemeContext中檢索當(dāng)前主題，從而允許ThemedButton組件相應(yīng)地設(shè)置自己的樣式。
useReducer Hook是useState的一種替代方案，更適合管理復(fù)雜的狀態(tài)邏輯。它接受一個(gè)reducer函數(shù)和一個(gè)初始狀態(tài)，并返回當(dāng)前狀態(tài)和一個(gè)dispatch函數(shù)。
下面是一個(gè)使用useReducer的簡(jiǎn)單計(jì)數(shù)器的例子：
JavaScript import React, { useReducer } from 'react'; function counterReducer(state, action) { switch (action.type) { case 'INCREMENT': return { count: state.count + 1 }; case 'DECREMENT': return { count: state.count - 1 }; default: return state; } } function Counter() { const [state, dispatch] = useReducer(counterReducer, { count: 0 }); return ( <div> <p>Count: {state.count}</p> <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button> <button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button> </div> ); } export default Counter;在這個(gè)例子中，定義了一個(gè)reducer函數(shù)counterReducer來(lái)處理狀態(tài)更新。useReducer Hook初始化狀態(tài)，并提供一個(gè)分派函數(shù)來(lái)分派動(dòng)作。
useRef Hooks創(chuàng)建一個(gè)可變r(jià)ef對(duì)象。Refs通常用于訪問(wèn)DOM、管理焦點(diǎn)或緩存不會(huì)觸發(fā)重新渲染的值。
以下是使用useRef關(guān)注輸入元素的示例：
JavaScript import React, { useRef } from 'react'; function InputWithFocus() { const inputRef = useRef(); const focusInput = () => { inputRef.current.focus(); }; return ( <div> <input ref={inputRef} type="text" /> <button onClick={focusInput}>Focus Input</button> </div> ); } export default InputWithFocus;在這個(gè)例子中，inputRef ref被附加到input元素上，使用戶能夠在單擊“focus input”按鈕時(shí)對(duì)其進(jìn)行聚焦。
useCallback和useMemo Hooks用于通過(guò)記憶函數(shù)或計(jì)算值來(lái)優(yōu)化性能。useCallback存儲(chǔ)一個(gè)函數(shù)，而useMemo存儲(chǔ)一個(gè)計(jì)算值。
以下是一個(gè)useMemo僅在數(shù)字發(fā)生變化時(shí)計(jì)算其平方的示例：
JavaScript import { useState, useEffect } from 'react'; function useTimer(initialTime = 0) { const [time, setTime] = useState(initialTime); useEffect(() => { const intervalId = setInterval(() => { setTime((prevTime) => prevTime + 1); }, 1000); return () => { clearInterval(intervalId); }; }, []); return time; } export default useTimer;在這個(gè)例子中，squaredNumber的值是使用useMemo來(lái)記憶的，所以只有當(dāng)數(shù)字狀態(tài)改變時(shí)才會(huì)重新計(jì)算。
這些額外的Hook為用戶的函數(shù)組件提供了靈活性和優(yōu)化機(jī)會(huì)。用戶可以混合和匹配這些Hooks以滿足應(yīng)用程序的特定需求。
雖然React提供了一組內(nèi)置的Hooks，但用戶也可以創(chuàng)建自己的自定義Hooks來(lái)封裝可重用的邏輯。自定義Hooks遵循相同的命名約定，并且可以在內(nèi)部使用現(xiàn)有的Hooks。
JavaScript import { useState, useEffect } from 'react'; function useTimer(initialTime = 0) { const [time, setTime] = useState(initialTime); useEffect(() => { const intervalId = setInterval(() => { setTime((prevTime) => prevTime + 1); }, 1000); return () => { clearInterval(intervalId); }; }, []); return time; } export default useTimer;在這個(gè)例子中，useTimer自定義Hook管理一個(gè)每秒遞增的計(jì)時(shí)器。它在內(nèi)部使用useState和useEffect Hook。
用戶可以在任何函數(shù)組件中使用這個(gè)自定義Hook來(lái)管理計(jì)時(shí)器，而無(wú)需復(fù)制計(jì)時(shí)器邏輯。
React Hooks為簡(jiǎn)化Web開(kāi)發(fā)中的常見(jiàn)模式提供了許多可能性。以下來(lái)探索一些實(shí)際場(chǎng)景，其中Hooks可以特別有用：
從API或其他來(lái)源獲取數(shù)據(jù)是Web應(yīng)用程序中的常見(jiàn)任務(wù)。用戶可以使用useEffect Hook來(lái)獲取數(shù)據(jù)和管理加載狀態(tài)。以下是一個(gè)簡(jiǎn)單的例子:
JavaScript import React, { useState, useEffect } from 'react'; function DataFetching() { const [data, setData] = useState([]); const [loading, setLoading] = useState(true); useEffect(() => { fetch('https://api.example.com/data') .then((response) => response.json()) .then((data) => { setData(data); setLoading(false); }); }, []); return ( <div> {loading ? ( <p>Loading data...</p> ) : ( <ul> {data.map((item) => ( <li key={item.id}>{item.name}</li> ))} </ul> )} </div> ); } export default DataFetching;在本例中，使用useState來(lái)管理數(shù)據(jù)和加載狀態(tài)，并使用useEffect在組件裝載時(shí)獲取數(shù)據(jù)。
表單是大多數(shù)Web應(yīng)用程序的重要組成部分。React Hooks允許用戶更干凈地管理表單狀態(tài)和驗(yàn)證邏輯，從而簡(jiǎn)化了表單處理。以下是一個(gè)基本示例：
JavaScript import React, { useState } from 'react'; function Form() { const [formData, setFormData] = useState({ username: '', password: '', }); const handleChange = (e) => { const { name, value } = e.target; setFormData({ ...formData, [name]: value, }); }; const handleSubmit = (e) => { e.preventDefault(); // Handle form submission with formData }; return ( <form onSubmit={handleSubmit}> <input type="text" name="username" value={formData.username} onChange={handleChange} /> <input type="password" name="password" value={formData.password} onChange={handleChange} /> <button type="submit">Submit</button> </form> ); } export default Form;在這個(gè)例子中，使用useState Hook來(lái)管理表單數(shù)據(jù)，并使用handleChange函數(shù)來(lái)更新表單狀態(tài)。
在這篇指南中，從React Hooks的介紹和動(dòng)機(jī)到實(shí)際示例和常見(jiàn)模式，走遍了React Hooks的世界。React Hooks徹底改變了開(kāi)發(fā)人員編寫(xiě)React組件的方式，使函數(shù)組件比以往任何時(shí)候都更加強(qiáng)大和富有表現(xiàn)力。
React Hooks如今已經(jīng)成為React開(kāi)發(fā)人員工具包中的重要工具，可以提高代碼的可讀性、可維護(hù)性和可重用性。無(wú)論是想要開(kāi)始使用React的初學(xué)者，還是想要重構(gòu)代碼庫(kù)的經(jīng)驗(yàn)豐富的開(kāi)發(fā)人員，React Hooks都提供了一種現(xiàn)代而有效的方式來(lái)構(gòu)建健壯的Web應(yīng)用程序。
原文標(biāo)題：Unleashing the Power of React Hooks，作者：Atul Naithani
本文鏈接：http://www.www897cc.com/showinfo-26-17166-0.html如何釋放React?Hooks的力量
聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
上一篇： 聊聊接口重試機(jī)制的幾種解決方案
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請(qǐng)聯(lián)系：2376512515@qq.com 津ICP備18001702號(hào)
津公網(wǎng)安備 12010102000574號(hào)