Hook详解（二）

接着上次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
	}
}