React Hooks常用鉤子及基本原理解讀
一. 簡述
在以往的react16.8前， 我們React組件創(chuàng)建方式基本包含兩種方式： 類組件， 純函數(shù)組件。
React 團隊希望組件最佳寫法應(yīng)該是函數(shù)，而不是類。
然而常規(guī)的純函數(shù)組件有以下特點：
- 沒有狀態(tài)
- 沒有生命周期
- 沒有 this
因存在如上特點，使得純函數(shù)組件只能做UI展示的功能， 涉及到狀態(tài)的管理與切換就不得不用到類組件或這redux。
但因為簡單的頁面也是用類組件，同時要繼承一個React實例，使得代碼會顯得很重。
‘Hooks’ 單詞意思為：鉤子。
React Hooks 意思是：組件盡量寫成純函數(shù)，如果需要外部功能和副作用，就用鉤子把外部代碼“鉤”進來。
React Hooks常用鉤子有如下四種：
- useState()
- useContext()
- useReducer()
- useEffect()
使用hooks 我們會發(fā)現(xiàn)沒有了繼承，渲染邏輯，生命周期等， 代碼看起來更加的輕便簡潔了。
React 約定，鉤子一律使用 use 前綴命名 （自定義鉤子都命名為：useXXXX）
二. 常用舉例及原理分析
useState 狀態(tài)鉤子
官方示例：
import React, {useState} from 'react'
const AddCount = () => {
const [ count, setCount ] = useState(0)
const addcount = () => {
let newCount = count
setCount(newCount+=1)
}
return (
<>
<p>{count}</p>
<button onClick={addcount}>count++</button>
</>
)
}
原理：
// 我們實現(xiàn)一個簡易版的useState
let memoizedStates = [ ] // 多個useState 時需要使用數(shù)組來存
let index = 0
function useState (initialState) {
memoizedStates[index] = memoizedStates[index] || initialState
let currentIndex = index;
function setState (newState) {
memoizedStates[currentIndex] = newState
render()
}
return [memoizedStates[index++], setState]
}
useContext 共享狀態(tài)鉤子
該鉤子的作用是，在組件之間共享狀態(tài)。
可以解決react逐層通過Porps傳遞數(shù)據(jù)。
import React,{ useContext } from 'react'
const ShareContext= () => {
const AppContext = React.createContext({})
const A =() => {
const { name } = useContext(AppContext)
return (
<p>我是A組件的名字{name}<span>我是A的子組件{name}</span></p>
)
}
const B =() => {
const { name } = useContext(AppContext)
return (
<p>我是B組件的名字{name}</p>
)
}
return (
<AppContext.Provider value={{name: 'hook測試'}}>
<A/>
<B/>
</AppContext.Provider>
)
}
export default ShareContext
useContext（context） 是針對 context (上下文) 提出的api。
它接受React.createContext()的返回結(jié)果作為參數(shù)（也就是context對象并返回最近的context）。
使用useContext將不再需要Provider 和 Consumer。
當最近的context更新時，那么使用該context的hook將會重新渲染。
useReducer(): Action 鉤子
React本身不提供狀態(tài)管理。
而useReducer() 提供了狀態(tài)管理。
其基本原理是通過用戶在頁面中發(fā)起action, 從而通過reducer方法來改變state, 從而實現(xiàn)頁面和狀態(tài)的通信。
import React,{useReducer} from 'react'
const MyReducer= () => {
const reducer = (state, action) => {
if(action.type === ''add){
return {
...state,
count: state.count +1,
}
}else {
return state
}
}
const addcount = () => {
dispatch({
type: 'add'
})
}
const [state, dispatch] = useReducer(reducer, {count: 0})
return (
<>
<p>{state.count}</p>
<button onClick={addcount}>count++</button>
</>
)
}
export default MyReducer
使用useReducer() 代替了Redux的功能， 但useReducer 無法提供中間件等功能。
useEffect(): 副作用鉤子
React常規(guī)開發(fā)中，我們習(xí)慣將一些處理副作用的操作，如：異步請求等 放在特定的生命周期中。
useEffect 則是為函數(shù)組件提供了副作用的鉤子。
useEffect() ： 接收兩個參數(shù)， 第一個是進行的異步操作， 第二個是數(shù)組，用來給出Effect的依賴項。
第二個參數(shù)（數(shù)組）發(fā)生變化， ==useEffect()==就會執(zhí)行。
第二項不填時， useEffect（） 會在每次組件渲染時執(zhí)行。
import React, { useState, useEffect } from 'react'
const AsyncPage = ({name}) => {
const [loading, setLoading] = useState(true)
const [person, setPerson] = useState({})
// useEffect 類似compomnetDidMount 初始化會執(zhí)行，更新時會執(zhí)行
useEffect(() => {
setLoading(true)
setTimeout(()=> {
setLoading(false)
setPerson({name})
},3000)
},[name])
return (
<div>
{loading?<p>Loading...</p>:<p>{person.name}</p>}
<div/>
)
}
const PersonPage = () =>{
const [state, setState] = useState('')
const changeName = (name) => {
setState(name)
}
return (
<>
<AsyncPage name={state}/>
<button onClick={() => {changeName('名字1')}}>名字1</button>
<button onClick={() => {changeName('名字2')}}>名字2</button>
</>
)
}
export default PersonPage
創(chuàng)建自己的Hooks
有時候我們需要創(chuàng)建自己想要的Hooks， 來滿足更便捷的開發(fā)。
import React, { useState, useEffect } from 'react'
const usePerson = (name) => {
const [loading, setLoading] = useState(true)
const [person, setPerson] = useState({})
useEffect(() => {
setLoading(true)
setTimeout(()=> {
setLoading(false)
setPerson({name})
},2000)
},[name])
return [loading,person]
}
const AsyncPage = ({name}) => {
const [loading, person] = usePerson(name)
return (
<div>
{loading?<p>Loading...</p>:<p>{person.name}</p>}
</div>
)
}
const PersonPage = () =>{
const [state, setState]=useState('')
const changeName = (name) => {
setState(name)
}
return (
<div>
<AsyncPage name={state} />
<button onClick={() => {changeName('名字1')}}>名字1</button>
<button onClick={() => {changeName('名字2')}}>名字2</button>
</div>
)
}
export default PersonPage
上面自定義了一個Hooks, 它接受一個字符串， 返回一個數(shù)組， 數(shù)組中的兩個狀態(tài)在使用usePerson() 時， 會根據(jù)傳入的不同反而返回不同的狀態(tài)。
React Hooks 概要及未來
根據(jù)官方文檔的說法：
完全可選
- 100%向后兼容 (Hook 不會含任何破壞性改動)
- 現(xiàn)在可用 （Hook 已發(fā)布于 v16.8.0）
- 沒有計劃從React中移除class
- Hook不會影響對React概念的理解 （Hook 為React提供了相關(guān)API：props, state，context, refs以及生命周期）
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
解決React報錯React?Hook?useEffect?has?a?missing?dependency
這篇文章主要為大家介紹了解決React報錯React?Hook?useEffect?has?a?missing?dependency，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
現(xiàn)在最熱門的前端框架，毫無疑問是 React 。下面這篇文章主要給大家分享了關(guān)于想用好React的你必須要知道的一些事情，文中介紹的非常詳細，對大家具有一定參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。2017-07-07
解析React?ref?命令代替父子組件的數(shù)據(jù)傳遞問題
這篇文章主要介紹了React?-?ref?命令為什么代替父子組件的數(shù)據(jù)傳遞,使用?ref?之后，我們不需要再進行頻繁的父子傳遞了，子組件也可以有自己的私有狀態(tài)并且不會影響信息的正常需求，這是為什么呢？因為我們使用了?ref?命令的話，ref是可以進行狀態(tài)的傳輸2022-08-08
教你使用vscode 搭建react-native開發(fā)環(huán)境
本文記錄如何使用vscode打造一個現(xiàn)代化的react-native開發(fā)環(huán)境，旨在提高開發(fā)效率和質(zhì)量。本文給大家分享我遇到的問題及解決方法，感興趣的朋友跟隨小編一起看看吧2021-07-07
使用React路由實現(xiàn)頁面導(dǎo)航的示例代碼
在構(gòu)建現(xiàn)代Web應(yīng)用程序時,前端路由是一個不可或缺的部分,今天,我們將討論如何在React中使用React Router來實現(xiàn)頁面導(dǎo)航,在這篇博客中,我們將會探索路由的基本概念,設(shè)置React Router,并通過示例代碼來展示如何實現(xiàn)復(fù)雜的頁面導(dǎo)航,需要的朋友可以參考下2025-02-02
react-redux的connect與React.forwardRef結(jié)合ref失效的解決
這篇文章主要介紹了react-redux的connect與React.forwardRef結(jié)合ref失效的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
Zustand是一個為React和瀏覽器環(huán)境設(shè)計的輕量級狀態(tài)管理庫,由Vercel開發(fā),它特點包括輕量級、易用性、靈活性、可組合性和性能優(yōu)化,支持多種狀態(tài)管理模式和中間件,適合中小型項目,Zustand還支持TypeScript,提供類型安全的支持2024-09-09
這篇文章主要介紹了ReactNative頁面跳轉(zhuǎn)的代碼,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-09-09
這篇文章主要介紹了使用react遍歷對象生成dom問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了優(yōu)雅的在React項目中使用Redux的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11