课程名称:React16.8+Next.js+Koa2开发Github全栈项目
课程章节:第4章 React新特性Hooks讲解 4-2
课程讲师:Jokcy
课程内容:
State Hokks有两个API:useState和useReducer。
useState其实是基于useReducer实现的一个API,useReducer才是react中基础的,关于状态管理的hook。
正如我们的经验,越底层的东西,使用越不简单,也越不常用。越上层的封装,使用越简单,也更常用。
所以,相比较useReducer,useState的使用频率更高,使用起来也更简单。
通过useState传入默认值之后,返回一个数组,里面有两个变量(可以通过const res = useCount(0), 打印res来看看数组长什么样),一般都是通过数组解构,数组第一项作为一个state,第二项是更新该state的方法。比如,
const [count, setCount] = useState(0);
注意点:
1.传入的默认值
2.setCount有两种用法:
setCount(1): 传入一个值:传入什么,state的值就变成什么。
setCount(c => c+1): 传入一个回调,回调函数的参数是当前最新的state,可以针对当前最新的state做些事情。
两种方式最大的区别是:
使用第一种方式,是直接覆盖的用法,参数中的state可能并不是最新的state,造成得不到我们想要的结果的情况。可能导致闭包陷阱。
使用第二种方式,回调函数的参数拿到是当前最新的state。可以规避闭包陷阱。
useState其实是基于useReducer实现的hook,只不过会变得更加常用,使用方式更简单。
useReducer才是真正的基础的react 中关于状态管理的hook。
useReducer的用法很类似redux:
import React, { useReducer } from 'react'; // 定义Reducer函数,就像redux中定义reducer函数那样 // 接收一个state和action作为参数 function counterReducer(state, action) { switch(action.type) { case 'add': return state + 1; case 'minus': return state - 1; default: return state; } } // 使用 function Counter() { // useReducer接收两个参数,第一个参数是reducer函数,第二个参数是初始的state // 返回一个数组,第一个参数是初始的state, 第二个参数是用来专门派发action的方法,只对当前的state生效 const [ count, dispatchCounter ] = useReducer(counterReducer, 0); useEffect(() => { const interval = setInterval(() => { // dispatchCounter接收一个action作为参数 dispatchCounter({type: 'add'}) }, 1000) return () => clearInterval(interval) }, []) return ( <span>{ count }</span> ) }
课程收获:
这节课学习了 useState 和 useReducer 这两个和状态有关的 hook 函数,前者是基于后者实现的,是一种简化之后的 API。