接着上次hook钩子函数的记录,本次主要是对剩下的Hook函数useMemo,useref,useContext,useRecuder,useRecuser进行学习记录
1、useMemo(记忆组件)
该Hook函数与上次讲的useCallback(记忆函数)的功能是类似的,结构也是类似,在使用是也是需要进行 引入,传入的也是两个参数,第一个是函数,第二个是依赖数组,当数组中没有参数时,只会执行一次,状态变化也不会执行,当依赖中有值在该值发生变化后执行。
import React, { useMemo, useState } from 'react'
export default function APP() {
const [num, setnum] = useState(0)
useMemo(() => console.log(num),[num])
}
与useCallback()不同的是,useMemo(函数的第一个回调函数会直接运行并返回执行结果,返回的是值,相当于vue的计算属性。
2、useRef()
该函数有两个作用:1、与平时使用的ref一样,用来通过绑定ref找到对应的元素
import React, { useRef } from 'react'
export default function APP() {
let myRef = useRef()
return (
<div>
<input ref={myRef}></input>
</div>
)
}
2、用来保存临时变量不丢失
import React, { useRef } from 'react'
let index = useRef(0)
定义了一个临时变量index初识值为0,在index的值发生变化后保存最新的值,在组件进行更新后,该临时变量保存的还是最新的值。
3、useContext()跨级通信
该函数与context作用是一样的,可以使组件之间共享组件状态,用来组件间的相互通信
首先创建context:
const GlobalContext = React.createContext()
在context中有两个内置组件发布者和订阅者,Provider和Consumer
import React, { useContext } from 'react'
// 创建context
const GlobalContext = React.createContext()
// 这个GlobalContext中包含两个组件{Provider ,Consumer}
export default function App() {
return (
// 这个组件上有个value属性值,传需要传的值
<GlobalContext.Provider value={100}>
<div>
<Child></Child>
</div>
</GlobalContext.Provider>
)
}
function Child() {
//调用useContext方法,将上面创建的context传入该方法里
const value = useContext(GlobalContext)
return <div>{value}</div>
在子组件接收父组件传来的值时,使用useContext()将上面创建的context传入该方法中,返回的就是在Provider组件上value属性传的值
4、useReducer()
外部状态管理,对组件的状态进行统一的管理。useReducer()函数需要两个参数,第一个参数为reducer,该函数为外部处理函数,第二个参数为定义在外部的状态管理。返回的是一个对象,通常将state和dispatch解构出来,其中state为外部的状态,也是第二个传进来的参数,要想访问状态直接state.状态名就可以了。dispatch方法写在事件函数的内部,用来调用外部处理函数,该函数传的是一个对象,属性是type用来对事件的标识
// 外部状态管理
const intialState = {
count: 0,
}
export default function App() {
const [state, dispatch] = useReducer(reducer, intialState) //在外部将函数与状态都定义出来
// 返回的是一个对象,state保存的是状态,是一个对象,要想访问状态,直接state.状态就可以访问
// 第二个参数 dispatch方法,写在事件函数内部,用以修改状态,调用外部定义的reducer方法
return (
<div>
<button
onClick={() => {
dispatch({
//在这个函数的对象中添加type属性,执行外部定义的reducer函数,并将定义的这个属性传进去,用与区分事件
type: 'minus', //减
})
}}
>
-
</button>
{state.count}
<button
onClick={() => {
dispatch({
type: 'add', //加
})
}}
>
+
</button>
</div>
)
}
当事件回调执行到dispatch,会调用执行外部函数reducer,并将dispatch中定义的事件标志传入。reducer函数入下:
const reducer = (prevState, action) => {
// prevState:原来的状态值,action:接收dispath方法传来的那个带有type属性的对象
// 到这里就可以进行状态的修改,不用直接进行修改
let newState = { ...prevState }
switch (action.type) {
case 'minus': //减按钮的方法
newState.count--
return newState
case 'add': //加按钮的方法
newState.count++
return newState
default:
return prevState
}
}