动机
-
在组件之间复用状态逻辑很难, providers,consumers,高阶组件,render props等可以将横切关注点 (如校验,日志,异常等) 与核心业务逻辑分离开,但是使用过程中也会带来扩展性限制,ref传值问题,“嵌套地狱”等问题;Hook 提供一种简单直接的代码复用方式,可以使开发者在无需修改组件结构的情况下复用状态逻辑。
-
复杂组件生命周期常常包含一些不相关的逻辑,相互关联且需要对照修改的代码被进行了拆分,而完全不相关的代码却在同一个方法中组合在一起;很多开发者将 React 与状态管理库结合使用,这往往会引入了很多抽象概念,开发过程中还需要在不同的文件之间来回切换;Hook 提供一种更合理的代码组织方式,可以将组件中相互关联的代码聚集在一起,而不是被生命周期方法强制拆开,使其更加可预测。
-
class 组件存在着一些问题(如:class 不利于代码压缩,并且会使热重载出现不稳定的情况);Hook支持函数组件,使开发者在非class 的情况下可以使用更多的 React 特性。
使用
Hooks 只能在函数组件 (FunctionComponent) 中使用,赋予无实例无生命周期的函数组件以 class 组件的表达力并且更合理地拆分/组织代码,解决复用问题。
实现原理
Fiber 提供了 hooks 实现的基础:hooks 是基于 Fiber 对象上能存储 memoizedState,它以双向链表的形式存储在 Fiber 的 memoizedState 字段中。
什么是 Fiber?
Fiber 把应用树区分成每一个节点的更新,每一个 ReactElement 对应一个 Fiber 对象,Fiber 呈链表结构,串联整个应用树结构 (child, siblings, return),如图:
Fiber 会记录节点的各种状态 (state, props)(包括functional Component),并且在 update 的时候,会从原来的 Fiber(current)clone 出一个新的 Fiber(alternate)。两个 Fiber diff 出的变化(side effect)记录在 alternate上,在更新结束后 alternate 会取代之前的 current 的成为新的 current 节点。
Fiber 对 react 渲染机制的改变主要的影响:
-
异步更新:因为 Fiber 把应用树区来分成每一个节点的更新,它们的更新互相独立,不会有相互的影响,所以可以异步打断现在的更新,然后去等待一个别的任务执行完成之后回过头来继续进行更新。
-
提供了 hooks 实现的基础:hooks 是基于 Fiber 对象上能存储 memoizedState, 基于 memoizedState 上可以存储这些东西,一步一步向下构建了 hooks API 的体系。
主要 Hooks
-
常用的:useState, useEffect, useContext, useReducer;
-
此外不常用的:useLayoutEffect, useCallback, useMemo, useRef, useImperativeHandle。
以 useState 为例了解 hook 的渲染更新过程 先了解 Hook 的数据结构
export type Hook = {
memoizedState: any, //上一次渲染的时候的state
baseState: any, // 当前正在处理的state
baseUpdate: Update<any, any> | null, // 当前的更新
queue: UpdateQueue<any, any> | null, // 产生的update放在这个队列里
next: Hook | null, // 下一个
};
运行下面的组件代码
export default function App() {
const [name, setName] = useState('dora')
const nameChange = e => {
setName(e.target.value)
}
return (
<React.Fragment>
<input type='text' value={name} onChange={nameChange} />
<p>{name}</p>
</React.Fragment>
)
}
初始化 state 时调用 mountState,初始化 initialState,并且记录在 workInProgressHook.memoizedState 和 workInProgressHook.baseState上,然后创建 queue 对象, queue 的 dispatch 属性是用来记录更新 state 的方法的,dispatch 就是 dispatchAction绑定了对应的 Fiber 和 queue。然后返回初始的格式 [name, setName] = useState('dora');执行源码如下:
function mountState<S>(
initialState: (() => S) | S,
): [S, Dispatch<BasicStateAction<S>>] {
const hook = mountWorkInProgressHook();
if (typeof initialState === 'function') {
initialState = initialState();
}
hook.memoizedState = hook.baseState = initialState;
const queue = (hook.queue = {
last: null,
dispatch: null,
lastRenderedReducer: basicStateReducer,
lastRenderedState: (initialState: any),
});
const dispatch: Dispatch<
BasicStateAction<S>,
> = (queue.dispatch = (dispatchAction.bind(
null,
((currentlyRenderingFiber: any): Fiber),
queue,
): any));
return [hook.memoizedState, dispatch];
}
再来看更新过程
function updateState<S>(
initialState: (() => S) | S,
): [S, Dispatch<BasicStateAction<S>>] {
return updateReducer(basicStateReducer, (initialState: any));
}
由此可见 useState 只是个语法糖,本质就是 useReducer;那么再来看 useReducer:
function updateReducer<S, I, A>(
reducer: (S, A) => S,
initialArg: I,
init?: I => S,
): [S, Dispatch<A>] {
const hook = updateWorkInProgressHook();
const queue = hook.queue;
queue.lastRenderedReducer = reducer;
if (numberOfReRenders > 0) {
//在当前更新周期中又产生了新的更新
//就继续执行这些更新直到当前渲染周期中没有更新为止
...
}
const last = queue.last;
const baseUpdate = hook.baseUpdate;
const baseState = hook.baseState;
let first;
if (baseUpdate !== null) {
if (last !== null) {
last.next = null;
}
first = baseUpdate.next;
} else {
first = last !== null ? last.next : null;
}
if (first !== null) {
let newState = baseState;
let newBaseState = null;
let newBaseUpdate = null;
let prevUpdate = baseUpdate;
let update = first;
let didSkip = false;
do {
const updateExpirationTime = update.expirationTime;
if (updateExpirationTime < renderExpirationTime) {
if (!didSkip) {
didSkip = true;
newBaseUpdate = prevUpdate;
newBaseState = newState;
}
if (updateExpirationTime > remainingExpirationTime) {
remainingExpirationTime = updateExpirationTime;
}
} else {
markRenderEventTimeAndConfig(
updateExpirationTime,
update.suspenseConfig,
);
if (update.eagerReducer === reducer) {
newState = ((update.eagerState: any): S);
} else {
const action = update.action;
newState = reducer(newState, action);
}
}
prevUpdate = update;
update = update.next;
} while (update !== null && update !== first);
if (!didSkip) {
newBaseUpdate = prevUpdate;
newBaseState = newState;
}
if (!is(newState, hook.memoizedState)) {
markWorkInProgressReceivedUpdate();
}
hook.memoizedState = newState;
hook.baseUpdate = newBaseUpdate;
hook.baseState = newBaseState;
queue.lastRenderedState = newState;
} const dispatch: Dispatch<A> = (queue.dispatch: any);
return [hook.memoizedState, dispatch];
}
就是根据 reducer 和 update.action 来创建新的 state,并赋值给 Hook.memoizedState以及 Hook.baseState;在当前更新周期中又产生了新的更新, 就继续执行这些更新直到当前渲染周期中没有更新为止。然后对每个更新判断其优先级(根据expirationTime值的大小),如果不是当前整体更新优先级内得更新会跳过,第一个跳过得 Update 会变成新的 baseUpdate,他记录了在之后所有得 Update,即便是优先级比他高得,因为在他被执行得时候,需要保证后续的更新要在他更新之后的基础上再次执行。
最后执行 dispatchAction方法,发起一次 scheduleWork 的调度,完成更新,此处省略代码。
useEffect vs useLayoutEffect
useEffect 和 useLayoutEffect 带给 FunctionalComponent 产生副作用能力的 Hooks,他们的行为非常类似 componentDidMount 和 componentDidUpdate 的合集,并且通过 return 一个函数指定如何“清除”副作用。
先看 useEffect 和 useLayoutEffect 更新的过程:
两者都调用了 updateEffectImpl(fiberEffectTag, hookEffectTag, create, deps) 方法,传入的第二个参数又作为 pushEffect 的入参生成一个新的 effect。
这个 effect 的 tag 就是入参 hookEffectTag,pushEffect 方法返回一个新的 effect,并且创建了一个 updateQueue,这个 queue 会在 commit 阶段被执行。
可以看到,这个阶段,useEffect 和 useLayoutEffect 的主要区别在生成的 effect 的 tag参数不同,通过计算,两者的tag值分别为二进制:0b11000000 和 0b00100100;
再来看 commit 阶段调用的 commitHookEffectList 方法。
通过对比传入的 effectTag(unmountTag & mountTag) 和 Hook 对象上的 effectTag,判断是否需要执行对应的 destory 和 create 方法,那么又在哪些地方调用了commitHookEffectList 方法呢?可以看下其中两处:commitLifeCycles 和 commitWork。
在 commitLifeCycles 中传入的 unmountTag 和 mountTag 值分别为:0b00010000 和 0b00100000; 在 commitWork 中传入的 unmountTag 和 mountTag 值分别为:0b00000100 和 0b00001000; 分别计算 effect.tag & unmountTag 和 effect.tag & mountTag:
可以看到 useLayoutEffect 的 destory 会在 commitWork 的时候被执行;而他的 create会在 commitLifeCycles 的时候被执行;useEffect 在这个流程中都不会被执行。
事实上:
-
useLayoutEffect 会在当前 commit 执行的过程中就会被执行 destroy 和 create, 而对于 useEffect,会异步地等到这次所有的 dom 节点更新完成,浏览器渲染完成后,才会去执行这部分代码。
-
它对于 useLayoutEffect 来说,它是不会去阻塞浏览器的渲染,因为我们可能在 useLayoutEffect 里面去执行一些 dom 相关的操作,甚至 setState 来执行一些更新,这种更新都会同步执行,相当于 react 的运行时它要占用更长的 js 的运行时间,导致浏览器没有时间去渲染,最终可能会导致页面会有些卡顿。
-
服务端渲染情况下,无论 useLayoutEffect 还是 useEffect 都无法在 Javascript 代码加载完成之前执行。可以通过使用 showChild &&进行条件渲染,并使用 useEffect(() => { setShowChild(true); }, []) 延迟展示组件。
-
useLayoutEffect 的执行过程跟 componentDidMount 和 componentDidUpdate 非常相似,所以 React 官方也说了,如果你一定要选择一个类似于生命周期方法的 Hook,那么 useLayoutEffect 是不会错的那个,但是我们推荐你使用 useEffect,在你清楚他们的区别的前提下,后者是更好的选择。
更多 Hook 使用,请查看以下文档
官方文档 zh-hans.reactjs.org/docs/hooks-…
作者:朵拉
扫码关注:「铜板街科技」微信公众号,精彩内容定期推送。公众号消息界面回复「推荐」「前端」「Java」「客户端」获取更多精准内容。