下述状态即使用的变量,
Hook 这个单词的意思是"钩子"。
React Hooks 的意思是,组件尽量写成纯函数,如果需要外部功能和副作用,就用钩子把外部代码"钩"进来。 React Hooks 就是那些钩子。
你需要什么功能,就使用什么钩子。React 默认提供了一些常用钩子,你也可以封装自己的钩子。
所有的钩子都是为函数引入外部功能,所以 React 约定,钩子一律使用use前缀命名,便于识别。你要使用 xxx 功能,钩子就命名为 usexxx。
Hook | 作用 |
---|---|
useState | 返回一个数组,用于保存函数组件的状态 |
useEeffect | 相当于componentDidMount、componentUpdateDidMount、componentWillUnMount这三个生命周期 |
useMemo | 根据[ ]里的依赖项赋值或返回值,用于缓存声明状态 |
useCallback | 与useMemo相似,不同的常用于缓存一个函数 |
useContext | 用于保存全局的状态,若有状态需要全局使用,可使用 |
useReducer | 状态管理的Hook,根据函数处理状态,处理复杂的状态 |
示例:
const [state,setState] = useState(initialValue);
state为使用的状态,setState为赋值改变state的方法,useState()的参数为初始值
相当于函数组件的生命周期的钩子函数,函数组件本身并无生命周期可言。
useEeffect(()=>{
actionCode
return willUnDidMount的function函数
},[Dependencies])
// actionCode为执行的代码, Dependencies依赖项,可为多个
当没有依赖项时,函数组件初始化时或更新actionCode会执行
useEeffect (()=>{
actionCode
})
当[ ]为空时,只会在初始化时执行actionCode
useEeffect (()=>{
actionCode
},[])
当有依赖项,函数组件初始化和 []内容改变更新时会执行actionCode,即param1||param2改变更新都会执行
useEeffect (()=>{
actionCode
},[param1,param2])
backFunction 的执行:当函数组件卸载时就会执行,相当于componentWillUnMount周期函数
useEeffect (()=>{
actionCode
return backFunction
},[param1,param2])
起到一个缓存作用,缓存返回一个值,不需要每次函数渲染都重复去加在一个state
const state = useMemo(()=>{
let initState = 0;
return initStete
},[dependencies])
//根据依赖项dependencies才会返回值给state
console.log(state) //0
=>得到state == initState == 0
缓存并声明返回一个函数,与useMemo作用相似
全局上下文,Provider 内的组件都能够共享到的全局上下文
主要用于保存一些子组件都需要用到的状态,不需要通过复杂的传递
//1.创建AppContext ,全局上下文
const AppContext = React.createContext({});
//2.组件的封装使用,在Navbar和Messages中能使用{userName:'superawesome'}这个状态
//3.子组件中使用全局状态
const Navbar = () => {
const { username } = useContext(AppContext); //解构获取AppContext的状态
return (
AwesomeSite
{username}
);
}
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}
参考学习链接:React Hooks入门教程.