UNDERCOVERj

在下一个 `state` 或 `props` 更新时，`render()` 函数将会返回一个不同的 `React` 元素树。接下来 `React` 将会找出如何高效地更新 `UI` 来匹配最近时刻的 `React` 元素树。 可以通过指定 `key` 属性，来指示哪些元素可以保持稳定。 `props.key` 也对应 `fiber.key` ``` render () { return ( {this.state.arr.map((item, idx) => {...

继上一章批量更新优化，我们得到了一个 `updateQueue` ，且以 `first` ， `next` 形式将 `update` 对象链接起来。 `updateQueue` 挂载在具体的 `instance` 下，待遍历到该 `instance` 对应的 `fiber` 时，处理更新队列。 在回调函数执行完后，需要 `performWork` ，将状态的改变应用到视图上。这样就进入了页面渲染流程，不过不一样的是这次不是第一次渲染了。 1. 当从 `root` 遍历到此 `instance` 对应的 `fiber` 时，会根据 `updateQueue` 处理得到新的...

# 什么是fiber 所谓`fiber`，它其实是一个`react`中的架构，一个 `fiber` 对象代表了一个`work`单位 优化渲染任务，让一个大组件细化，**从同步变成异步**，让渲染任务有了**优先级**。生命周期函数调用不再是同步的，让用户能感知的性能提高了。 `fiber`可以把很大的工作分成一个个小块（`trunk`），`trunk`之间是异步的，每个`trunk`之间可以执行别的操作。 以`render`函数为界，分为两个阶段，在`render`之前改变 `workInProgress tree`，执行生命周期函数比如`componentWillMount`，`componentWillReceiveProp`。在`render`函数之后，执行`componentDidMount`， `componentDidUpdate`。在第一个阶段，可能被中断。 ## 优势 1. 当处理 `ui` 时，如果很多 `work` 突然运行，可以使动画帧下降。`fiber` 被视为 `virtual stack frame` ，能定制调用栈优化行为，并能随意中断调用堆栈和手动操作堆栈帧。 ## 特性 1. 在更新过程中能暂停、中断、重用 `work` 2....

# session ## 概念 1. 指一类用来在客户端与服务器之间保持状态的解决方案 2. 这种解决方案的存储结构 ## 特点 - 由于 `Session` 是以文本文件形式存储在服务器端的，所以不怕客户端修改 Session 内容。（也可以用其他存储方式比如`redis`） - `Session`对象是有生命周期的 - `Session`实例是轻量级的，所谓轻量级：是指他的创建和删除不需要消耗太多资源 - `Session`对象内部有一个缓存 ## 用法 `Session` 对象存储特定用户会话所需的属性及配置信息，在`web`页跳转时，信息将不会丢失 ### 通常用于以下操作 1. 存储整个会话过程中保持用户状态的信息，比如登录信息或者用户浏览时产生的其它信息...

# 问题（完成后解决） - [x] 导出function为什么用module.exports不用exports - [ ] util.inherits - [ ] promise/deferred怎样实现的 - [x] requirejs的应用 # 简介 目标：写一个基于**事件驱动** ，**非阻塞i/o** 的web服务器，以达到更高的性能。构建快速，可伸缩的网络应用平台 js开发性能低，事件驱动应用 node强制不共享任何资源的 **单线程** ，单进程系统，包含十分适宜网络的库 ### 应用： 1. 访问本地文件 2....

# 模块化机制 ## CommonJS规范 应用于服务器端，同步加载 `nodejs`有一个模块加载系统 每个文件被视为一个独立的模块 `module.exports`属性可以被赋予一个新的值（例如函数或对象） `module.filename === __filename` `module === require.main` `require.resolve`返回路径 ### `module.exports` `module.exports` 对象是由模块系统创建, 可以导出一个对象或者函数。 `module.exports === exports // true` 也就是说`exports`和`module.exports`是指向同一内存的。而模块导出的时候实际是导出`module.exports`的值 ### 缓存： 模块在第一次加载后会被缓存，是基于其文件名来缓存的 ###...

# 核心思想如下 ``` let data = '' ctx.req.on('data', (chunk) => { data += chunk; console.log(data); }) ``` 因为request也是可读流，故监听data事件可以获得完整的请求主体 ## 简化koa-body中间件 就拿`content-type`为`application/json`的请求来说 ``` function requestbody (opts) { opts.json = 'json' in...

先贴一段应用的代码，然后带着代码中的问题去深入 其实，koa-router的源码并不多。 ``` const Koa = require('koa'); const Router = require('koa-router'); const router = new Router(); const app = new Koa(); router.get(path, async (ctx, next) => {}) app.use(router.routes()) ``` 发现问题：...

## 起手式 ``` mkdir koa-demo & cd koa-demo npm init -y npm i koa ``` koa要求node v7.6.0来支持async和es6 版本过低解决办法： 1. 使用babel的require钩子 ``` require('babel-core/register'); // require the rest of the app that...

## 入口application.js 简化代码: ``` const Emitter = require('events'); const context = require('./context'); const request = require('./request'); const response = require('./response'); class Application extends EventEmmiter { constructor () { super(); this.context...