Q: React 引入hooks的原因
A: 让函数组件可以做类组件的事，可以有自己的state，可以处理一些副作用，获取ref。
hooks 与 fiber (workInProgress)
hooks主要以三种形态存在于react中：
- HooksDispatcherOnMount：函数组件初始化，建立fiber与hooks之间的关系
- HooksDispatcherOnUpdate： 函数组件的更新，需要 hooks 去获取或者更新维护状态。
- ContextOnlyDispatcher： 防止在函数外部调用，直接报错
所有函数组件的触发是在 renderWithHooks 方法中：
let currentlyRenderingFiber
function renderWithHooks(current,workInProgress,Component,props){
// 初始化时把处理中的fiber赋值给currentlyRenderingFiber，每个hooks内部读取的就是currentlyRenderingFiber的内容。
currentlyRenderingFiber = workInProgress;
// memoizedState用来存放hooks列表
workInProgress.memoizedState = null;
workInProgress.updateQueue = null; /* 清空状态（用于存放effect list） */
// 如果是初始化阶段使用HooksDispatcherOnMount，更新阶段使用HooksDispatcherOnUpdate
// React 通过赋予 current 不同的 hooks，以此来监控 hooks 是否在函数组件内部调用
ReactCurrentDispatcher.current = current === null || current.memoizedState === null ? HooksDispatcherOnMount : HooksDispatcherOnUpdate
// 此时，函数组件在Component函数内部被真正执行，对应的hooks也会被依次执行
let children = Component(props, secondArg);
ReactCurrentDispatcher.current = ContextOnlyDispatcher; /* 将hooks变成第一种，防止hooks在函数组件外部调用，调用直接报错。 */
}
注意：函数组件触发时把处理中的fiber赋值给currentlyRenderingFiber，后面的源码会调用。
在组件初始化的时候，每一次hooks的执行，都会调用mountWorkInProgressHook。
function mountWorkInProgressHook() {
const hook = {
memoizedState: null, // useState中 保存 state信息 ｜ useEffect 中 保存着 effect 对象 ｜ useMemo 中 保存的是缓存的值和deps ｜ useRef中保存的是ref 对象
baseState: null,
baseQueue: null,
queue: null,
next: null,
};
if (workInProgressHook === null) {
// 在renderWithHooks函数中已经将workInProgress赋值给currentlyRenderingFiber
currentlyRenderingFiber.memoizedState = workInProgressHook = hook;
} else {
// 每一个 hooks 通过 next 链表建立起关系
workInProgressHook = workInProgressHook.next = hook;
}
return workInProgressHook;
}
如下例子：
export default function Index(){
const [ number,setNumber ] = React.useState(0) // 第一个hooks
const [ num, setNum ] = React.useState(1) // 第二个hooks
const dom = React.useRef(null) // 第三个hooks
React.useEffect(()=>{ // 第四个hooks
console.log(dom.current)
},[])
return <div ref={dom} >
<div onClick={()=> setNumber(number + 1 ) } > { number } </div>
<div onClick={()=> setNum(num + 1) } > { num }</div>
</div>
}
hooks链表如下图：
Q：hooks为什么要放在函数顶部，不能写在条件判断语句中？
A：在更新阶段，会先复用一份hooks，形成新的hooks链表。如果放在if语句中，会造成链表对比不一致的情况。
useState
在react中，useState会mountState函数中初始化
function mountState(
initialState
){
const hook = mountWorkInProgressHook();
if (typeof initialState === 'function') {
// 如果 useState 第一个参数为函数，执行函数得到state
initialState = initialState();
}
hook.memoizedState = hook.baseState = initialState;
// 保存更新信息
const queue = (hook.queue = {
...
});
// 负责更新的函数
const dispatch = (queue.dispatch = (dispatchAction.bind(
null,
currentlyRenderingFiber,
queue,
)))
return [hook.memoizedState, dispatch];
}
useState通过dispatchAction 来触发state更新。
dispatchAction 定义如下：
function dispatchAction<S, A>(
fiber: Fiber,
queue: UpdateQueue<S, A>,
action: A,
)
const [ number , setNumber ] = useState(0)
dispatchAction 就是setNumber，dispatchAction前两个参数已被固定写死,我们传入的是第三个参数action。
下面分析dispatchAction内部实现：
function dispatchAction(fiber, queue, action){
/* 第一步：创建一个 update */
const update = { ... }
const pending = queue.pending;
// 第一次更新
if (pending === null) {
update.next = update;
} else { /* 再次更新 */
update.next = pending.next;
pending.next = update;
}
if( fiber === currentlyRenderingFiber ){
/* 说明当前fiber正在发生调和渲染更新，那么不需要更新 */
}else{
if(fiber.expirationTime === NoWork && (alternate === null || alternate.expirationTime === NoWork)){
const lastRenderedReducer = queue.lastRenderedReducer;
// 上一次的state
const currentState = queue.lastRenderedState;
// 本次需要更新的state
const eagerState = lastRenderedReducer(currentState, action);
// 如果两次更新state相同，则不更新
if (is(eagerState, currentState)) {
return
}
}
scheduleUpdateOnFiber(fiber, expirationTime); /* 发起调度更新 */
}
}
多次调用同一个setState/useState为何会合并处理?
useState 触发更新的本质是updateReducer，源码如下：
function updateReducer(){
// 第一步把待更新的pending队列取出来。合并到 baseQueue
const first = baseQueue.next;
let update = first;
// 当同一个useState在执行时,会继续给newState赋值，而不是向下执行
do {
newState = reducer(newState, action);
} while (update !== null && update !== first);
hook.memoizedState = newState;
return [hook.memoizedState, dispatch];
}
useEffect
当我们调用useEffect的时候，在组件第一次渲染的时候会调用mountEffect方法
function mountEffect(create,deps){
const hook = mountWorkInProgressHook();
const nextDeps = deps === undefined ? null : deps;
// pushEffect创建一个 effect, 如果存在多个effect就会形成副作用链表
hook.memoizedState = pushEffect(
HookHasEffect | hookEffectTag,
create, // useEffect 第一次参数，就是副作用函数
undefined,
nextDeps, // useEffect 第二次参数，deps
)
}
对于函数组件，可能存在多个 useEffect / useLayoutEffect ，hooks 把这些 effect，独立形成链表结构，在 commit 阶段统一处理和执行。
更新流程就是判断两次deps是否相等：
function updateEffect(create,deps){
const hook = updateWorkInProgressHook();
// 如果deps没有变化，则更新effect list就可以了
if (areHookInputsEqual(nextDeps, prevDeps)) {
pushEffect(hookEffectTag, create, destroy, nextDeps);
return;
}
// 如果deps依赖项发生改变，赋予 effectTag。在commit阶段会根据 effectTag 判断执行effect
currentlyRenderingFiber.effectTag |= fiberEffectTag
hook.memoizedState = pushEffect(HookHasEffect | hookEffectTag,create,destroy,nextDeps)
}
useRef
useRef 就是创建并维护一个 ref 原始对象。
function mountRef(initialValue) {
const hook = mountWorkInProgressHook();
const ref = {current: initialValue};
hook.memoizedState = ref; // 创建ref对象。
return ref;
}
更新：
function updateRef(initialValue){
const hook = updateWorkInProgressHook()
return hook.memoizedState // 取出复用ref对象。
}
useMemo
function mountMemo(nextCreate,deps){
const hook = mountWorkInProgressHook();
const nextDeps = deps === undefined ? null : deps;
const nextValue = nextCreate();
hook.memoizedState = [nextValue, nextDeps];
return nextValue;
}
function updateMemo(nextCreate,nextDeps){
const hook = updateWorkInProgressHook();
const prevState = hook.memoizedState;
const prevDeps = prevState[1]; // 之前保存的 deps 值
if (areHookInputsEqual(nextDeps, prevDeps)) { //判断两次 deps 值
return prevState[0];
}
const nextValue = nextCreate(); // 如果deps，发生改变，重新执行
hook.memoizedState = [nextValue, nextDeps];
return nextValue;
}