useReducer
1. 组件初始化
const [state, dispatch] = useReducer(reducer, initState)
组件初始化
在组件初始化的时候，调用useReducer会创建一个reducer hook，其内部会创建两个状态：state、oldState，两个方法：dispatch、reducer（就是我们传入的reducer），并且返回state和dispatch给组件。
- 初始化时候，state和oldState全是initState
- dispatch一旦创建完毕，就永远不会改变
- reducer就是我们自定义传入的reducer，可以随意发挥，传入state和action，返回一个状态
并且组件会订阅这个reducer hook，当状态改变时候，会自动触发组件更新 - 请务必用分离的眼光看待函数组件和reducer hook，下面会讲
react源码中不止这几个状态，并且写法不一样，我这是是为了简化
2. 调用dispatch
通过任意事件调用dispatch，例如点击一个按钮、一个ajax请求回调，一个注销，等等。
调用dispatch
- 第一步 外部调用dispatch(action)
- 第二步 reducer hook内部处理，调用 reducer(state, action), 和旧state做对比
- 第三步 如果新旧state一致，不会有任何动作。如果不一致，则会触发函数组件更新
- 第四步 函数组件更新，其实就是执行一遍函数组件
- 第五步 函数组件执行时候，执行到useReducer时候，会去reducer hook中取当前状态，就是第三步产生的新状态
用程序来表达的话:
// 模拟已经初始化过的状态
let state = {num: 1};
let oldState = state;
function reducer(state, action) {
switch(action.type) {
case 'CHANGE':
return {
...state,
num: action.num
}
case 'NO_CHANGE':
return state;
default:
throw new Error('no such action type');
}
}
function dispatch(action) {
oldState = state;
// 第二步 调用reducer产生新状态
state = reducer(state, action);
// 第三步 新旧状态比较，不一致则更新函数组件
if (state !== oldState) {
updateComponent();
}
}
function updateComponent() {
// 第四步 更新函数组件其实就是调用函数组件（源码中会复杂些，处理Fiber和Work的状态）
App();
}
function useReducer() {
// 如果是初始化
// 初始化代码
// 这里做了简化 只处理了更新 初始化的代码不写了
return [state, dispatch];
}
function App() {
// 第五步 函数组件执行时候，调用useReducer取得新状态
const [state, dispatch] = useReducer();
return (
<div>{state.num}</div>
)
}
// 第一步，调用dispatch
dispatch({type: 'CHANGE', num: 8});
useState
这么理解就行了：useState其实就是一个useReducer简化版
useState版本
function App() {
const [state, dispatch] = useState(1);
return <div>{state}</div>
}
和useReducer版本
function reducer(state, action) {
// 在源码中叫basicStateReducer
return action;
}
function App() {
const [state, dispatch] = useReducer(reducer, 1);
return <div>{state}</div>
}
是一模一样的
react是如何处理多个hook读取的
react会生成一个Fiber树，每个组件在Fiber树上都有对应的节点FiberNode。组件的所有hook状态都存在FiberNode的memoizedState属性上。
当执行这个函数组件的时候，第一次useSomeHook语句，就会去取第一个hook状态。
第二次遇到useSomeHook语句，就取第二个hook状态。以此类推。
所以，可以把这些hook状态理解成一个数组（但其实是个链表）。
image.png
- hooks状态是有序的，会被react机械地依次读取
- 所以hooks不能放在条件中使用，否则不能保证对应上
调试查看Fiber树
function App() {
const [a, setA] = useState('A');
const [b, setB] = useState('B');
const [c, setC] = useState('C');
return (
<>
<p>{a}</p>
<p>{b}</p>
<p>{c}</p>
</>
)
}
如何看Fiber树
index.js
ReactDOM.render(<App />, document.getElementById('root'));
const fiberRoot = document.querySelector('#root')._reactRootContainer._internalRoot;
const hostRootFiberNode = fiberRoot.current;
console.log(hostRootFiberNode); // 这就是Fiber树
Fiber树
首先，顶层FiberNode是HostRoot，对应的是#root。
然后其child对应的App的FiberNode。
可以看App的FiberNode的属性memoizedState中储存了App使用的三个hook状态'A'、'B'、'C'。
但不是数组，是链表形式，通过next属性读取下一个状态。不影响理解。
下面，稍微改复杂些，加上useReducer和useEffect
function App() {
const [a, setA] = useState('State：A');
const [myData, dispatch] = useReducer(reducer, {num: 1});
const xx = 'XX';
useEffect(() => {
console.log(xx);
}, [xx])
return (
<>
<p>{a}</p>
<p>{myData.num}</p>
</>
)
}
稍微复杂一些的状态
可以看到，原理都是一样的，都是按序保存。
只不过useState和useReducer保存的是一个数据。
useEffect保存的东西更多些：
- tag: 192 其实是二进制0b11000000，表示了这个effect会在MountPassive和UnmountPassive过程被使用（请别和生命周期混淆）。react会在组件初始化或者更新完毕后或者卸载前相应阶段去使用此effect（通过这个tag判断）。
- create：表示调用函数
- destroy：表示销毁函数（会在组件卸载（unmount）或者更新前去调用（即再次create之前））
- deps：表示参数依赖，参数不变的话，这个effect不会执行
tag对照表
export const NoEffect = /* */ 0b00000000;
export const UnmountSnapshot = /* */ 0b00000010;
export const UnmountMutation = /* */ 0b00000100;
export const MountMutation = /* */ 0b00001000;
export const UnmountLayout = /* */ 0b00010000;
export const MountLayout = /* */ 0b00100000;
export const MountPassive = /* */ 0b01000000;
export const UnmountPassive = /* */ 0b10000000;
结语
- 其他hooks都是类似的。
- 基础hook useState和useReducer提供了可以刷新（更新）函数组件的途径。同样，也是自定义hook刷新的途径。如果想让自定义hook去刷新函数组件，那只能在自定义组件中使用useState或者useReducer来强制刷新，达到类似以前forUpdate的效果。
function flagReducer(state) {
return state + 1;
}
function useRedux() {
const [flag, flagDispatch] = useReducer(flagReducer, 0);
useEffect(() => {
const unSubscribeFn = store.subscribe(() => {
flagDispatch();
})
return unSubscribeFn;
}, [store])
return store;
}
function App() {
const store = useRedux();
...
}
这样，每当redux数据发生改变时候，会调用flagDispatch，改变flag，从而导致这个reducer变化，触发自定义hook useRedux变化，连锁触发App刷新，达到以前forceUpdate的效果。
