React Hooks 源码模拟与解读
useState 解析
useState 使用
一般咱们这样来使用 useState 方法javascript
function App() {
const [num, setNum] = useState(0);
const add = () => {
setNum(num + 1);
};
return (
<div> <p>数字: {num}</p> <button onClick={add}> +1 </button> </div>
);
}
复制代码
useState 的使用过程，咱们先模拟一个大概的函数html
function useState(initialValue) {
var value = initialValue
function setState(newVal) {
value = newVal
}
return [value, setState]
}
复制代码
这个代码有一个问题，在执行 useState 的时候每次都会 var _val = initialValue，初始化数据；java
因而咱们能够用闭包的形式来保存状态。react
const MyReact = (function() {
// 定义一个 value 保存在该模块的全局中
let value
return {
useState(initialValue) {
value = value || initialValue
function setState(newVal) {
value = newVal
}
return [value, setState]
}
}
})()
复制代码
这样在每次执行的时候，就可以经过闭包的形式 来保存 value。ios
不过这个仍是不符合 react 中的 useState。由于在实际操做中会出现屡次调用，以下。axios
function App() {
const [name, setName] = useState('Kevin');
const [age, setAge] = useState(0);
const handleName = () => {
setNum('Dom');
};
const handleAge = () => {
setAge(age + 1);
};
return (
<div> <p>姓名: {name}</p> <button onClick={handleName}> 更名字 </button> <p>年龄: {age}</p> <button onClick={handleAge}> 加一岁 </button> </div>
);
}
复制代码
所以咱们须要在改变 useState 储存状态的方式api
useState 模拟实现
const MyReact = (function() {
// 开辟一个储存 hooks 的空间
let hooks = [];
// 指针从 0 开始
let currentHook = 0
return {
// 伪代码 解释从新渲染的时候 会初始化 currentHook
render(Component) {
const Comp = Component()
Comp.render()
currentHook = 0 // 从新渲染时候改变 hooks 指针
return Comp
},
useState(initialValue) {
hooks[currentHook] = hooks[currentHook] || initialValue
const setStateHookIndex = currentHook
// 这里咱们暂且默认 setState 方式第一个参数不传 函数，直接传状态
const setState = newState => (hooks[setStateHookIndex] = newState)
return [hooks[currentHook++], setState]
}
}
})()
复制代码
所以当从新渲染 App 的时候，再次执行 useState 的时候传入的参数 kevin , 0 也就不会去使用，而是直接拿以前 hooks 存储好的值。数组
hooks 规则
官网 hoos 规则中明确的提出 hooks 不要再循环，条件或嵌套函数中使用。闭包
为何不能够？
咱们来看下dom
下面这样一段代码。执行 useState 从新渲染，和初始化渲染 顺序不同就会出现以下问题
若是了解了上面 useState 模拟写法的存储方式，那么这个问题的缘由就迎刃而解了。
useEffect 解析
useEffect 使用
初始化会 打印一次 ‘useEffect_execute’， 改变年龄从新render，会再打印， 改变名字从新 render， 不会打印。由于依赖数组里面就监听了 age 的值
import React, { useState, useEffect } from 'react';
function App() {
const [name, setName] = useState('Kevin');
const [age, setAge] = useState(0);
const handleName = () => {
setName('Don');
};
const handleAge = () => {
setAge(age + 1);
};
useEffect(()=>{
console.log('useEffect_execute')
}, [age])
return (
<div> <p>姓名: {name}</p> <button onClick={handleName}> 更名字 </button> <p>年龄: {age}</p> <button onClick={handleAge}> 加一岁 </button> </div>
);
}
export default App;
复制代码
useEffect 的模拟实现
const MyReact = (function() {
// 开辟一个储存 hooks 的空间
let hooks = [];
// 指针从 0 开始
let currentHook = 0 ；
// 定义个模块全局的 useEffect 依赖
let deps;
return {
// 伪代码 解释从新渲染的时候 会初始化 currentHook
render(Component) {
const Comp = Component()
Comp.render()
currentHook = 0 // 从新渲染时候改变 hooks 指针
return Comp
},
useState(initialValue) {
hooks[currentHook] = hooks[currentHook] || initialValue
const setStateHookIndex = currentHook
// 这里咱们暂且默认 setState 方式第一个参数不传 函数，直接传状态
const setState = newState => (hooks[setStateHookIndex] = newState)
return [hooks[currentHook++], setState]
}
useEffect(callback, depArray) {
const hasNoDeps = !depArray
// 若是没有依赖，说明是第一次渲染，或者是没有传入依赖参数，那么就 为 true
// 有依赖 使用 every 遍历依赖的状态是否变化， 变化就会 true
const hasChangedDeps = deps ? !depArray.every((el, i) => el === deps[i]) : true
// 若是有 依赖， 而且依赖改变
if (hasNoDeps || hasChangedDeps) {
// 执行
callback()
// 更新依赖
deps = depArray
}
},
}
})()
复制代码
useEffect 注意事项
依赖项要真实
依赖须要想清楚。
刚开始使用 useEffect 的时候，我只有想从新触发 useEffect 的时候才会去设置依赖
那么也就会出现以下的问题。
但愿的效果是界面中一秒增长一岁
import React, { useState, useEffect } from 'react';
function App() {
const [name, setName] = useState('Kevin');
const [age, setAge] = useState(0);
const handleName = () => {
setName('Don');
};
const handleAge = () => {
setAge(age + 1);
};
useEffect(() => {
setInterval(() => {
setAge(age + 1);
console.log(age)
}, 1000);
}, []);
return (
<div> <p>姓名: {name}</p> <button onClick={handleName}> 更名字 </button> <p>年龄: {age}</p> <button onClick={handleAge}> 加一岁 </button> </div>
);
}
export default App;
复制代码
其实你会发现 这里界面就增长了 一次 年龄。究其缘由:
**在第一次渲染中，age是0。所以，setAge(age+ 1)在第一次渲染中等价于setAge(0 + 1)。然而我设置了0依赖为空数组，那么以后的 useEffect 不会再从新运行，它后面每一秒都会调用setAge(0 + 1) **
也就是当咱们须要 依赖 age 的时候咱们 就必须再 依赖数组中去记录他的依赖。这样useEffect 才会正常的给咱们去运行。
因此咱们想要每秒都递增的话有两种方法
方法一：
真真切切的把你所依赖的状态填写到 数组中
// 经过监听 age 的变化。来从新执行 useEffect 内的函数
// 所以这里也就须要记录定时器，当卸载的时候咱们去清空定时器，防止多个定时器从新触发
useEffect(() => {
const id = setInterval(() => {
setAge(age + 1);
}, 1000);
return () => {
clearInterval(id)
};
}, [age]);
复制代码
方法二
useState 的参数传入 一个方法。
注：上面咱们模拟的 useState 并无作这个处理 后面我会讲解源码中去解析。
useEffect(() => {
setInterval(() => {
setAge(age => age + 1);
}, 1000);
}, []);
复制代码
useEffect 只运行了一次，经过 useState 传入函数的方式它再也不须要知道当前的age值。由于 React render 的时候它会帮咱们处理
这正是setAge(age => age + 1)作的事情。再从新渲染的时候他会帮咱们执行这个方法，而且传入最新的状态。
因此咱们作到了去时刻改变状态，可是依赖中却不用写这个依赖，由于咱们将本来的使用到的依赖移除了。（这句话表达感受不到位）
接口无限请求问题
刚开始使用 useEffect 的我，在接口请求的时候经常会这样去写代码。
props 里面有 页码，经过切换页码，但愿监听页码的变化来从新去请求数据
// 如下是伪代码
// 这里用 dva 发送请求来模拟
import React, { useState, useEffect } from 'react';
import { connect } from 'dva';
function App(props) {
const { goods， dispatch, page } = props;
useEffect(() => {
// 页面完成去发情请求
dispatch({
type: '/goods/list',
payload: {page, pageSize:10},
});
// xxxx
}, [props]);
return (
<div> <p>商品: {goods}</p> <button>点击切下一页</button> </div>
);
}
export default connect(({ goods }) => ({
goods,
}))(App);
复制代码
而后得意洋洋的刷新界面，发现 Network 中疯狂循环的请求接口，致使页面的卡死。
究其缘由是由于在依赖中，咱们经过接口改变了状态 props 的更新， 致使从新渲染组件，致使会从新执行 useEffect 里面的方法，方法执行完成以后 props 的更新， 致使从新渲染组件，依赖项目是对象，引用类型发现不相等，又去执行 useEffect 里面的方法，又从新渲染，而后又对比，又不相等， 又执行。所以产生了无限循环。
Hooks 源码解析
该源码位置: react/packages/react-reconciler/src/ReactFiberHooks.js
const Dispatcher={
useReducer: mountReducer,
useState: mountState,
// xxx 省略其余的方法
}
复制代码
mountState 源码
function mountState<S>(
initialState: (() => S) | S,
): [S, Dispatch<BasicStateAction<S>>] {
/*
mountWorkInProgressHook 方法 返回初始化对象
{
memoizedState: null,
baseState: null,
queue: null,
baseUpdate: null,
next: null,
}
*/
const hook = mountWorkInProgressHook();
// 若是传入的是函数 直接执行，因此第一次这个参数是 undefined
if (typeof initialState === 'function') {
initialState = initialState();
}
hook.memoizedState = hook.baseState = initialState;
const queue = (hook.queue = {
last: null,
dispatch: null,
lastRenderedReducer: basicStateReducer,
lastRenderedState: (initialState: any),
});
/*
定义 dispatch 至关于
const dispatch = queue.dispatch =
dispatchAction.bind(null,currentlyRenderingFiber，queue);
*/
const dispatch: Dispatch<
BasicStateAction<S>,
> = (queue.dispatch = (dispatchAction.bind(
null,
// Flow doesn't know this is non-null, but we do.
((currentlyRenderingFiber: any): Fiber),
queue,
): any));
// 能够看到这个dispatch就是dispatchAction绑定了对应的 currentlyRenderingFiber 和 queue。最后return：
return [hook.memoizedState, dispatch];
}
复制代码
dispatchAction 源码
function dispatchAction<A>(fiber: Fiber, queue: UpdateQueue<A>, action: A) {
//... 省略验证的代码
const alternate = fiber.alternate;
/* 这其实就是判断这个更新是不是在渲染过程当中产生的，currentlyRenderingFiber只有在FunctionalComponent更新的过程当中才会被设置，在离开更新的时候设置为null，因此只要存在并更产生更新的Fiber相等，说明这个更新是在当前渲染中产生的，则这是一次reRender。 全部更新过程当中产生的更新记录在renderPhaseUpdates这个Map上，以每一个Hook的queue为key。 对于不是更新过程当中产生的更新，则直接在queue上执行操做就好了，注意在最后会发起一次scheduleWork的调度。 */
if (
fiber === currentlyRenderingFiber ||
(alternate !== null && alternate === currentlyRenderingFiber)
) {
didScheduleRenderPhaseUpdate = true;
const update: Update<A> = {
expirationTime: renderExpirationTime,
action,
next: null,
};
if (renderPhaseUpdates === null) {
renderPhaseUpdates = new Map();
}
const firstRenderPhaseUpdate = renderPhaseUpdates.get(queue);
if (firstRenderPhaseUpdate === undefined) {
renderPhaseUpdates.set(queue, update);
} else {
// Append the update to the end of the list.
let lastRenderPhaseUpdate = firstRenderPhaseUpdate;
while (lastRenderPhaseUpdate.next !== null) {
lastRenderPhaseUpdate = lastRenderPhaseUpdate.next;
}
lastRenderPhaseUpdate.next = update;
}
} else {
const currentTime = requestCurrentTime();
const expirationTime = computeExpirationForFiber(currentTime, fiber);
const update: Update<A> = {
expirationTime,
action,
next: null,
};
flushPassiveEffects();
// Append the update to the end of the list.
const last = queue.last;
if (last === null) {
// This is the first update. Create a circular list.
update.next = update;
} else {
const first = last.next;
if (first !== null) {
// Still circular.
update.next = first;
}
last.next = update;
}
queue.last = update;
scheduleWork(fiber, expirationTime);
}
}
复制代码
mountReducer 源码
多勒第三个参数，是函数执行，默认初始状态 undefined
其余的和 上面的 mountState 大同小异
function mountReducer<S, I, A>(
reducer: (S, A) => S,
initialArg: I,
init?: I => S,
): [S, Dispatch<A>] {
const hook = mountWorkInProgressHook();
let initialState;
if (init !== undefined) {
initialState = init(initialArg);
} else {
initialState = ((initialArg: any): S);
}
// 其余和 useState 同样
hook.memoizedState = hook.baseState = initialState;
const queue = (hook.queue = {
last: null,
dispatch: null,
lastRenderedReducer: reducer,
lastRenderedState: (initialState: any),
});
const dispatch: Dispatch<A> = (queue.dispatch = (dispatchAction.bind(
null,
// Flow doesn't know this is non-null, but we do.
((currentlyRenderingFiber: any): Fiber),
queue,
): any));
return [hook.memoizedState, dispatch];
}
复制代码
经过 react 源码中，能够看出 useState 是特殊的 useReducer
- 可见
useState不过就是个语法糖，本质其实就是useReducer - updateState 复用了 updateReducer（区别只是 updateState 将 reducer 设置为 updateReducer）
- mountState 虽没直接调用 mountReducer，可是几乎大同小异（区别只是 mountState 将 reducer 设置为basicStateReducer）
注：这里仅是 react 源码，至于从新渲染这块 react-dom 尚未去深刻了解。
更新：
分两种状况，是不是 reRender，所谓reRender就是说在当前更新周期中又产生了新的更新，就继续执行这些更新知道当前渲染周期中没有更新为止
他们基本的操做是一致的，就是根据 reducer 和 update.action 来建立新的 state，并赋值给Hook.memoizedState 以及 Hook.baseState。
注意这里，对于非reRender得状况，咱们会对每一个更新判断其优先级，若是不是当前总体更新优先级内得更新会跳过，第一个跳过得Update会变成新的baseUpdate，他记录了在以后全部得Update，即使是优先级比他高得，由于在他被执行得时候，须要保证后续的更新要在他更新以后的基础上再次执行，由于结果可能会不同。
preact 中的 hooks
Preact 最优质的开源 React 替代品！（轻量级 3kb）
注意：这里的替代是指若是不用 react 的话，可使用这个。而不是取代。
useState 源码解析
调用了 useReducer 源码
export function useState(initialState) {
return useReducer(invokeOrReturn, initialState);
}
复制代码
useReducer 源码解析
// 模块全局定义
/** @type {number} */
let currentIndex; // 状态的索引，也就是前面模拟实现 useState 时候所说的指针
let currentComponent; // 当前的组件
export function useReducer(reducer, initialState, init) {
/** @type {import('./internal').ReducerHookState} */
// 经过 getHookState 方法来获取 hooks
const hookState = getHookState(currentIndex++);
// 若是没有组件 也就是初始渲染
if (!hookState._component) {
hookState._component = currentComponent;
hookState._value = [
// 没有 init 执行 invokeOrReturn
// invokeOrReturn 方法判断 initialState 是不是函数
// 是函数 initialState(null) 由于初始化没有值默认为null
// 不是函数 直接返回 initialState
!init ? invokeOrReturn(null, initialState) : init(initialState),
action => {
// reducer == invokeOrReturn
const nextValue = reducer(hookState._value[0], action);
// 若是当前的值,不等于 下一个值
// 也就是更新的状态的值,不等于以前的状态的值
if (hookState._value[0]!==nextValue) {
// 储存最新的状态
hookState._value[0] = nextValue;
// 渲染组件
hookState._component.setState({});
}
}
];
}
// hookState._value 数据格式也就是 [satea：any, action:Function] 的数据格式拉
return hookState._value;
}
复制代码
getHookState 方法
function getHookState(index) {
if (options._hook) options._hook(currentComponent);
const hooks = currentComponent.__hooks || (currentComponent.__hooks = { _list: [], _pendingEffects: [], _pendingLayoutEffects: [] });
if (index >= hooks._list.length) {
hooks._list.push({});
}
return hooks._list[index];
}
复制代码
invokeOrReturn 方法
function invokeOrReturn(arg, f) {
return typeof f === 'function' ? f(arg) : f;
}
复制代码
总结
使用 hooks 几个月了。基本上全部类组件我都使用函数式组件来写。如今 react 社区的不少组件，都也开始支持hooks。大概了解了点重要的源码，作到知其然也知其因此然，那么在实际工做中使用他能够减小没必要要的 bug，提升效率。
最后
全文章，若有错误或不严谨的地方，请务必给予指正，谢谢！
参考：
相关文章
- 1. React Hooks 源码解析（译）
- 2. React useEffect的源码解读
- 3. 精读《React Hooks》
- 4. react源码解读
- 5. 【React源码解读】react-component
- 6. 【React源码解读】react-element
- 7. React Hooks不彻底解读
- 8. React Hooks简单业务场景实战（非源码解读）
- 9. react 源码解读3 react-dom
- 10. 【React系列】react hooks全面解读
- 更多相关文章...
- • Eclipse 代码模板 - Eclipse 教程
- • Lua 模块与包 - Lua 教程
- • JDK13 GA发布：5大特性解读
- • 委托模式
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
