useState
const [ count ,setCount] = useState(parameter)
- count保存useState中的參數(shù)婿牍，參數(shù)可以為傳入普通的參數(shù)监嗜，也可以傳入function和array谐檀，在沒有傳入?yún)?shù)時(shí)為undefined
- setCount在改變count中的值時(shí)使用
- hook只能在React函數(shù)組件或者自定義hook中使用，不能在js函數(shù)中直接使用
- useState最好不要在循環(huán)裁奇，條件判斷或者子函數(shù)中調(diào)用桐猬，因?yàn)閡seState保存的數(shù)據(jù)使用鏈表的數(shù)據(jù)結(jié)構(gòu)進(jìn)行保存的，在上面的幾種條件下使用useState會(huì)使鏈表斷裂刽肠，數(shù)據(jù)會(huì)錯(cuò)亂
- 在React鉤子函數(shù)及合成事件中溃肪，表現(xiàn)為異步
- 在setTimeout和setInterval及DOM原生事件中表現(xiàn)為同步
useEffect
useEffect(() => {
console.log('開始訂閱')
return () => {
console.log('取消訂閱')
}
}, [count])
- 主要用于模擬類組件中的生命周期,需要傳入一個(gè)函數(shù)，在函數(shù)體類似類組件中componentDidmount函數(shù)音五，return返回的也是一個(gè)函數(shù)惫撰，類似于類組件中componentWillUnmount函數(shù)，我們可以在函數(shù)體中訂閱某些事件躺涝，在return返回函數(shù)中取消訂閱事件
- hook是可以添加多個(gè)相同的hook函數(shù)厨钻，這就意味著不必像類組件中所有的訂閱事件和網(wǎng)絡(luò)請(qǐng)求都放到componentWillUnmount，可以使用相同的hook將不同的事件進(jìn)行抽取
- useEffect的第二個(gè)參數(shù)是一個(gè)數(shù)組坚嗜，里面主要放函數(shù)體中的一些變量夯膀，當(dāng)這些變量發(fā)生改變時(shí)，函數(shù)才會(huì)被重新執(zhí)行苍蔬，如果不希望依賴任何變量時(shí)诱建，傳入空的數(shù)組就行
useContext
在組件中使用共享的Context有兩種方式
- 類組件可以通過 類名.contextType = MyContext方式，在類中獲取context
- 多個(gè)Context或者在函數(shù)式組件中通過 MyContext.Consumer 方式共享context
- 當(dāng)存在多個(gè)context時(shí)的方式會(huì)存在大量的嵌套
Context Hook允許我們通過Hook來直接獲取某個(gè)Context的值
const maincontext = useContext(Maincontext) // 直接獲取傳入的value值
//簡化context獲取值得操作碟绑，直接通過usecontext就可以獲取到傳入的value值
//但是第一步操作仍然不能少
const usecontext = useContext(Usecontext)
console.log(maincontext, usecontext)
useReducer
- useReducer主要用于在相同事件俺猿，不同方法時(shí)，代替useState格仲，避免過多的useState方法
- 要注意的是useReducer代替的是useState押袍，不是redux，useReducer里面的狀態(tài)是不能共享的
import React, { useState, useReducer } from 'react'
function reducer(state, action) {
switch (action.type) {
case "add":
return { ...state, count: state.count + 1 };
case "sub":
return { ...state, count: state.count - 1 }
default:
return state
}
}
export default function Home() {
// const [count, setCount] = useState(0)
const [state, dispatch] = useReducer(reducer, { count: 0 }) //拆分usestate
//將改變state狀態(tài)統(tǒng)一進(jìn)行管理
return (
<div>
<h2>當(dāng)前計(jì)數(shù):{state.count}</h2>
<button onClick={e => dispatch({ type: "add" })}>+1</button>
<button onClick={e => dispatch({ type: "sub" })}>+1</button>
</div>
)
}
useCallback 和 useMemo
- 這兩個(gè)的作用都是一樣的抓狭，都是為了對(duì)子組件傳遞相同內(nèi)容的函數(shù)或者對(duì)象時(shí)伯病，讓子組件不要重新進(jìn)行渲染
- 區(qū)別就是useCallback傳入的是函數(shù),可以添加相應(yīng)的依賴項(xiàng)
const sub = useCallback( ///子組件在沒有數(shù)據(jù)改變情況下不會(huì)重新渲染
() => {
console.log("sub被執(zhí)行")
setCount(count - 1)
}, [count],
)
- useMemo返回的可以是對(duì)象，數(shù)組否过，函數(shù),也可以添加相應(yīng)的依賴
//返回的是對(duì)象
const info = useMemo(() => {
return { name: "jack", age: 18 };
}, []);
useRef
常用的ref是兩種用法
- 用法一：引入DOM（或者組件午笛，但是需要是class組件）元素
- 用法二：保存一個(gè)數(shù)據(jù)，這個(gè)對(duì)象在整個(gè)生命周期中可以保存不變
import React, { useRef, useState, useEffect } from 'react'
export default function UseRefDemo1() {
const divRef = useRef()
const iptRef = useRef()
const [count, setCount] = useState(0)
const countRef = useRef(count) //只能保持初始值,
useEffect(() => { //通過useEffect可以保存上一次的值
countRef.current = count
}, [count])
function changeBtn() {
divRef.current.innerHTML = "world"
iptRef.current.focus()
}
return (
<div>
<div ref={divRef}>hello</div>
<input ref={iptRef} type="" name="" id="" />
<button onClick={e => changeBtn()}>點(diǎn)擊</button>
<h2 >CountRef:{countRef.current}</h2>
<h2>count: {count}</h2>
<button onClick={e => setCount(count + 1)}>+1</button>
</div>
)
}
useImperativeHandle
理解useImperativeHandle的用法先來看一下ref和forwardRef結(jié)合使用
- 通過forwardRef可以將ref轉(zhuǎn)發(fā)到子組件
- 子組件拿到父組件中創(chuàng)建的ref苗桂，綁定到自己的某一個(gè)元素中
import React, { forwardRef, useRef, useImperativeHandle } from 'react'
//父組件通過ref建立聯(lián)系,子組件通過forwardRef接收ref
const Btn = forwardRef((props, ref) => {
const forwardRef = useRef()
//下面需要利用子組件的ref
return <input ref={forwardRef} type="text" />
})
export default function RefDemo() {
const btnRef = useRef()
return (
<div>
<Btn ref={btnRef} ></Btn>
<button onClick={e => btnRef.current.focus()}>點(diǎn)擊</button>
</div>
)
}
- 這個(gè)例子就展示了ref和forwardRef的結(jié)合使用药磺，看起來其實(shí)是，沒有什么問題的煤伟，但是不夠嚴(yán)謹(jǐn)癌佩，父組件不僅僅能拿到子組件的focus方法木缝，還能拿到其他的方法，但是這里只需要focus方法围辙，react為了能讓代碼更加嚴(yán)謹(jǐn)一點(diǎn)造出來一個(gè)useImperativeHandle方法我碟，這個(gè)方法主要是讓父組件只能拿到他想要的方法，其他不要的方法不需要暴露給子組件姚建，下面對(duì)上面的代碼進(jìn)行一個(gè)更加嚴(yán)謹(jǐn)?shù)膶懛?/li>
import React, { forwardRef, useRef, useImperativeHandle } from 'react'
//父組件通過ref建立聯(lián)系,子組件通過forwardRef接收ref
//useImperativeHandle 作用只暴露父組件需要的子組件方法和屬性
const Btn = forwardRef((props, ref) => {
const forwardRef = useRef()
useImperativeHandle(ref, () => ({
focus: () => { //父組件只需要focus方法,只暴露子組件focus方法
forwardRef.current.focus();
}
}), [forwardRef.current]) //子組件的ref發(fā)生更新時(shí)重新渲染
//下面需要利用子組件的ref
return <input ref={forwardRef} type="text" />
})
export default function RefDemo() {
const btnRef = useRef()
return (
<div>
<Btn ref={btnRef} ></Btn>
<button onClick={e => btnRef.current.focus()}>點(diǎn)擊</button>
</div>
)
}
-這里子組件就只暴露了focus方法矫俺，其他的方法是沒有暴露的，讓代碼的邏輯性更加嚴(yán)謹(jǐn)
useLayoutEffect
-
useLayoutEffect看起來和useEffect非常的相似掸冤，事實(shí)上他們也只有一點(diǎn)區(qū)別而已
useLayoutEffect - useEffect會(huì)在渲染的內(nèi)容更新到DOM上后執(zhí)行厘托，不會(huì)阻塞DOM的更新
- useLayoutEffect會(huì)在渲染內(nèi)容更新到DOM之前執(zhí)行，會(huì)阻塞DOM的更新
- 如果我們希望在某些操作發(fā)生之后再更新DOM稿湿，那么應(yīng)該將這個(gè)操作放到useLayoutEffect
