React Hook

React Hook简介

下述状态即使用的变量，

Hook 这个单词的意思是"钩子"。

React Hooks 的意思是，组件尽量写成纯函数，如果需要外部功能和副作用，就用钩子把外部代码"钩"进来。 React Hooks 就是那些钩子。

你需要什么功能，就使用什么钩子。React 默认提供了一些常用钩子，你也可以封装自己的钩子。

所有的钩子都是为函数引入外部功能，所以 React 约定，钩子一律使用use前缀命名，便于识别。你要使用 xxx 功能，钩子就命名为 usexxx。

基本的Hook

Hook	作用
useState	返回一个数组，用于保存函数组件的状态
useEeffect	相当于componentDidMount、componentUpdateDidMount、componentWillUnMount这三个生命周期
useMemo	根据[ ]里的依赖项赋值或返回值，用于缓存声明状态
useCallback	与useMemo相似，不同的常用于缓存一个函数
useContext	用于保存全局的状态，若有状态需要全局使用，可使用
useReducer	状态管理的Hook,根据函数处理状态，处理复杂的状态

useState

示例：

const  [state,setState] = useState(initialValue);

state为使用的状态，setState为赋值改变state的方法，useState()的参数为初始值

useEeffect

相当于函数组件的生命周期的钩子函数，函数组件本身并无生命周期可言。

	useEeffect(()=>{
     	 actionCode
     	return willUnDidMount的function函数
     },[Dependencies])
	// actionCode为执行的代码， Dependencies依赖项，可为多个

1. useEeffect demo1：

当没有依赖项时，函数组件初始化时或更新actionCode会执行

 useEeffect (()=>{
 	 actionCode
 })

2.useEeffect demo2：

当[ ]为空时，只会在初始化时执行actionCode

 useEeffect (()=>{
 	 actionCode
 },[])

3.useEeffect demo3：

当有依赖项，函数组件初始化和 []内容改变更新时会执行actionCode，即param1||param2改变更新都会执行

 useEeffect (()=>{
 	 actionCode
 },[param1,param2])  

4.useEeffect demo4：

backFunction 的执行：当函数组件卸载时就会执行，相当于componentWillUnMount周期函数

 useEeffect (()=>{
 	 actionCode
 	 return backFunction
 },[param1,param2])  

useMemo 声明状态或赋值

起到一个缓存作用，缓存返回一个值，不需要每次函数渲染都重复去加在一个state

const state = useMemo(()=>{
		let initState = 0;
		return  initStete
},[dependencies])
//根据依赖项dependencies才会返回值给state

console.log(state) //0
=>得到state == initState  == 0

useCallback

缓存并声明返回一个函数，与useMemo作用相似

useContext 全局状态

全局上下文，Provider 内的组件都能够共享到的全局上下文
主要用于保存一些子组件都需要用到的状态，不需要通过复杂的传递

//1.创建AppContext ,全局上下文
const AppContext = React.createContext({});

//2.组件的封装使用，在Navbar和Messages中能使用{userName:'superawesome'}这个状态
<AppContext.Provider value={{                      //给全局状态AppContext赋值
  username: 'superawesome'			
}}>
  <div className="App">
    <Navbar/>
    <Messages/>
  </div>
</AppContext.Provider>

//3.子组件中使用全局状态
const Navbar = () => {
  const { username } = useContext(AppContext);  //解构获取AppContext的状态
  return (
    <div className="navbar">
      <p>AwesomeSite</p>
      <p>{username}</p>
    </div>
  );
}

useReducer （Hook提供的状态管理方案，useState其实是封装好的useReducer）

reducer通过dispatch函数触发，(state,action) =>newState，返回值是新的state

demo1:

	const [state,dispatch]  = useReducer(reducer,initialState)

1.声明reducer函数

const reducer = (state,action)=>{
	switch(action.type){
		case "add":
	    	return  { 		//state是一个对象，返回的newState
	    		 ...state,           //将原有的值放入
	    		 count:state.count+1  //改变的值放入
	    	 } 
	 	defalut 
   			return state
   }
}

2.声明useReducer

const [state,dispatch]  = useReducer(reducer,{count:0}) //第二个参数initialState需要是对象

3.触发reducer

dispatch({type:''add"})   //触发reducer函数
//相当于reducer(state,{type:"add"})
//state参数不需要传入，只需要dispatch({type:''add"})即可

console.log(state)
//此时打印，会发现state={count:1}

usePerativeHandle

这个hook主要用于抛出子组件的方法，完成一个ref句柄功能，当然不用这个hook直接复制，useRef创建的ref也是可以完成效果，不过用该hook可以通过依赖项进行管理ref是否更新

import { FC, forwardRef, useImperativeHandle, useRef } from 'react'
const ChildNodeRow:FC = (props,ref)=>{
	const submit = ()=>{
		console.log('我被父组件调用了')
	}
	// 第一种方式
	useImperativeHanlde(ref,()=>{
		return {
			submit:submit
		} 
	},[我是依赖项])
	// 第二种方式
	if(ref.current){
		ref.current = {
			submit:submit
		}
	}
	return <div>我是子组件</div>
}
const childNode = forwardRef(ChildNodeRow);

const parentNode:FC = ()=>{
	const getChildRef = useRef<any>();
	getChildRef.current?.submit(); // 输出：我被父组件调用了

	return <ChildNode ref={getChildRef} />
}

参考学习链接：React Hooks入门教程.