useState

react对useState进行了封装,调用了mountState。

function useState<S>(
initialState: (() => S) | S,
): [S, Dispatch<BasicStateAction<S>>] {
currentHookNameInDev = 'useState';
mountHookTypesDev();
const prevDispatcher = ReactCurrentDispatcher.current;
ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnMountInDEV;
try {
return mountState(initialState);
} finally {
ReactCurrentDispatcher.current = prevDispatcher;
}
}

mountState

如果initialState是函数还可以执行。

生成一个dispatch方法,通过闭包绑定当前states。

把初始值存到memoizedState上。这个memoizedState绑定到fiber树上。用来存储state。

function mountState<S>(
initialState: (() => S) | S,
): [S, Dispatch<BasicStateAction<S>>] {
// 把hooks加入queue,实际上是为了保证执行顺序。
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,
// Flow doesn't know this is non-null, but we do.
((currentlyRenderingFiber: any): Fiber),
queue,
): any));
return [hook.memoizedState, dispatch];
}

memoizedState

react其实不知道我们调用了几次useState。

所以还是在memoizedState上动手脚,这个处理体现在mountWorkInProgressHook

 memoizedState: {
baseState,
next,
baseUpdate,
queue,
memoizedState
}

memoizedState.next就是下一次useState的hook对象。

hook1 === Fiber.memoizedState
state1 === hook1.memoizedState
state2 = hook1.next.memoizedState

因为以这种方式存储,所以usestate必须在functionalComponent的根作用域中。不能被for,和if。

setstate

mountState函数返回的是 return [hook.memoizedState, dispatch];

dispatch通过闭包就可以处理state。

更新

useState在更新的时候是调用的updateState,这个函数其实是封装的updateReducer。

function renderWithHooks(){
ReactCurrentDispatcher.current =
nextCurrentHook === null
? HooksDispatcherOnMount
: HooksDispatcherOnUpdate;
};
HooksDispatcherOnMount: {
useState: mountState,
}
HooksDispatcherOnUpdate: {
useState: updateState,
}

updateReducer

可以看到updateReducer把新的fiber中的state值更新,返回新的值。然后后续走渲染流程。(之前写过reat 的渲染流程)

还可以看到这有个循环update = update.next; while (update !== null && update !== first);

这就是hooks的batchUpdate。

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; // ...
// The last update in the entire queue
const last = queue.last;
// The last update that is part of the base state.
const baseUpdate = hook.baseUpdate;
const baseState = hook.baseState; // Find the first unprocessed update.
let first;
if (baseUpdate !== null) {
if (last !== null) {
// For the first update, the queue is a circular linked list where
// `queue.last.next = queue.first`. Once the first update commits, and
// the `baseUpdate` is no longer empty, we can unravel the list.
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) {
// Priority is insufficient. Skip this update. If this is the first
// skipped update, the previous update/state is the new base
// update/state.
if (!didSkip) {
didSkip = true;
newBaseUpdate = prevUpdate;
newBaseState = newState;
}
// Update the remaining priority in the queue.
if (updateExpirationTime > remainingExpirationTime) {
remainingExpirationTime = updateExpirationTime;
}
} else {
markRenderEventTimeAndConfig(
updateExpirationTime,
update.suspenseConfig,
); // Process this update.
if (update.eagerReducer === reducer) {
// If this update was processed eagerly, and its reducer matches the
// current reducer, we can use the eagerly computed state.
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;
} // Mark that the fiber performed work, but only if the new state is
// different from the current state.
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];
}

react 16 Hooks渲染流程的更多相关文章

  1. react 16 ssr的重构踩坑

    ssr 服务端不能识别前端的window.特别是首屏渲染的数据需要用到window对象(比如href += location.search); 服务端不能加载图片,css文件. require.ext ...

  2. react 16 渲染整理

    背景 老的react架构在渲染时会有一些性能问题,从setstate到render,程序一直在跑,一直到render完成.才能继续下一步操作.如果组件比较多,或者有复杂的计算逻辑,这之间的消耗的时间是 ...

  3. React 16.x & Hooks

    React 16.x & Hooks Hooks https://reactjs.org/docs/hooks-intro.html https://reactjs.org/docs/hook ...

  4. React 16 服务端渲染的新特性

    React 16 服务端渲染的新特性 React 16 中关于服务端渲染的新特性 快速介绍React 16 服务端渲染的新特性,包括数组.性能.流等 React 16 终于来了!

  5. react16 渲染流程

    前言 react升级到16之后,架构发生了比较大的变化,现在不看,以后怕是看不懂了,react源码看起来也很麻烦,也有很多不理解的地方. 大体看了一下渲染过程. react16架构的变化 react ...

  6. react 使用hooks

    react hooks文档 λ yarn add react@16.7.0-alpha.2 λ yarn add react-dom@16.7.0-alpha.2 设置 state import Re ...

  7. [译] React 16.3(.0-alpha) 新特性

    原文地址:What's new in React 16.3(.0-alpha) 原文作者:Bartosz Szczeciński 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/ ...

  8. react 16.8版本新特性以及对react开发的影响

    Facebook团队对社区上的MVC框架都不太满意的情况下,开发了一套开源的前端框架react,于2013年发布第一个版本. react最开始倡导函数式编程,使用function以及内部方法React ...

  9. cocos2d-x渲染流程

    Cocos2Dx之渲染流程 发表于8个月前(2014-08-08 22:46)   阅读(3762) | 评论(2) 17人收藏此文章, 我要收藏 赞2 如何快速提高你的薪资?-实力拍“跳槽吧兄弟”梦 ...

随机推荐

  1. vue中使用的一些问题(IE不兼容,打包样式不生效)

    通过脚手架快速创建的项目,使用了swiper组件,项目中使用了es6语法,使用了babel-polyfill转化依旧不行,仔细排查项目中的使用组件,最后找到问题所在 swiper4.5.0版本太高,不 ...

  2. Window权限维持(七):安全支持提供者

    安全支持提供程序(SSP)是Windows API,用于扩展Windows身份验证机制.LSASS进程正在Windows启动期间加载安全支持提供程序DLL.这种行为使红队的攻击者可以删除一个任意的SS ...

  3. 【06】Nginx:文件下载 / 用户认证

    写在前面的话 在公司内部一般都会存在 FTP / SAMBA 这样类似的文件服务器,虽然这类的程序都可以对用户的权限进行控制,但我们有时候其实只需要一个简单的下载页面,类似软件仓库.用户不管在哪里打开 ...

  4. Hashtable 负载因子Load Factor

    负载因子(load factor),它用来衡量哈希表的 空/满 程度,一定程度上也可以体现查询的效率,计算公式为: The ratio of the number of elements in the ...

  5. WPF-数据模板深入(加载XML类型数据)

    一.我们知道WPF数据模板是当我们给定一个数据类型,我们为这个数据类型写好布局,就给这种数据类型穿上了外衣. 下面这个例子,能够帮助大家充分理解数据模板就是数据类型的外衣的意思:(里面的MyListB ...

  6. Linux CentOS内核升级

    1. 说明 正在使用的阿里云服务器报了几个内核漏铜,使用自带[一键修复]需要额外的支付费用,所以尝试采用升级系统内核的方式来修复漏洞. 1.1 服务器参数 操作系统:CentOS 7.4 64位 当前 ...

  7. CentOS7 vsftp 安装与配置(视频教程)

    (双击全屏播放) 1.安装vsftpd yum install -y vsftpd 2.编辑ftp配置文件 vi /etc/vsftpd/vsftpd.conf anonymous_enable=NO ...

  8. 实战讲解XXE漏洞的利用与防御策略

    现在许多不同的客户端技术都可以使用XMl向业务应用程序发送消息,为了使应用程序使用自定义的XML消息,应用程序必须先去解析XML文档,并且检查XML格式是否正确.当解析器允许XML外部实体解析时,就会 ...

  9. 电信NBIOT 5 - NB73模块下行测试(自己平台-电线平台-NB73)

    电信NBIOT 1 - 数据上行(中国电信开发者平台对接流程) 电信NBIOT 2 - 数据上行(中间件获取电信消息通知) 电信NBIOT 3 - 数据下行 电信NBIOT 4 - NB73模块上行测 ...

  10. Spring Boot Quartz 动态配置,持久化

    Quartz 是一个很强大的任务调度框架在SpringBoot中也很容易集成 添加依赖: <dependency> <groupId>org.springframework&l ...