Xinyuan Wang
Xinyuan Wang
## 值得学习的blog https://github.com/EthanLin-TWer/blog
## React 单元测试究竟在测试什么 1. 组件状态 2. 业务数据流 3. 业务无瓜的工具函数(保证无副作用,100% 覆盖)
React 组件测试在测试什么 通过对内部 DOM 对象属性以及内容等,测试组件逻辑是否符合预期
通过组件库学习单元测试
状态管理中的 Domain Model 和 View Model
## Nest.js admin 基于 React 的 admin ![https://github.com/SoftwareBrothers/adminjs/raw/master/docs/anim.gif](https://github.com/SoftwareBrothers/adminjs/raw/master/docs/anim.gif) [https://github.com/SoftwareBrothers/adminjs](https://github.com/SoftwareBrothers/adminjs)
## nest 应该以模块为单位 ``` src ├─ app │ ├─ app.controller.spec.ts │ ├─ app.controller.ts │ ├─ app.e2e-spec.ts │ ├─ app.module.ts │ └─ app.service.ts ├─ config │ ├─ index.ts │ └─ typeorm.config.ts...
```js /* 二级级联选择器 */ class SelectorDasen { // 构造函数 constructor(root, data, placeholder, size) { let tempDom; // 创建根标签 let selectorRoot = document.createElement("div"); selectorRoot.classList.add("dasen-selector"); this.selectorRoot = selectorRoot; // 创建选择框标签 tempDom =...
1)背景 - react在进行组件渲染时,从setState开始到渲染完成整个过程是同步的(“一气呵成”)。如果需要渲染的组件比较庞大,js执行会占据主线程时间较长,会导致页面响应度变差,使得react在动画、手势等应用中效果比较差。 - 页面卡顿:Stack reconciler的工作流程很像函数的调用过程。父组件里调子组件,可以类比为函数的递归;对于特别庞大的vDOM树来说,reconciliation过程会很长(x00ms),超过16ms,在这期间,主线程是被js占用的,因此任何交互、布局、渲染都会停止,给用户的感觉就是页面被卡住了。 2)实现原理 > 旧版 React 通过递归的方式进行渲染,使用的是 JS 引擎自身的函数调用栈,它会一直执行到栈空为止。而Fiber实现了自己的组件调用栈,它以链表的形式遍历组件树,可以灵活的暂停、继续和丢弃执行的任务。实现方式是使用了浏览器的requestIdleCallback这一 API。 > Fiber 其实指的是一种数据结构,它可以用一个纯 JS 对象来表示: ```js const fiber = { stateNode, // 节点实例 child, // 子节点...
在处理UI时,如果一次执行太多工作,可能会导致动画丢帧。 基本上,如果React要同步遍历整个组件树,并为每个组件执行任务,它可能会运行超过16毫秒,这将导致不顺畅的视觉效果。 较新的浏览器(和React Native)实现了有助于解决这个问题的API:`requestIdleCallback`,可用于对函数进行排队,这些函数会在浏览器空闲时被调用: ```js requestIdleCallback((deadline)=>{ console.log(deadline.timeRemaining(), deadline.didTimeout) }); ``` 如果我现在打开控制台并执行上面的代码,Chrome会打印`49.9`和`false`,它基本上告诉我,我有`49.9ms`去做我需要做的任何工作,并且我还没有用完所有分配的时间,否则`deadline.didTimeout`将会是`true`。 > 请记住timeRemaining可能在浏览器被分配某些工作后立即更改,因此应该不断检查。 但`requestIdleCallback` 实际上有点过于严格,并且[[执行频次](https://github.com/facebook/react/issues/13206#issuecomment-418923831)](https://github.com/facebook/react/issues/13206#issuecomment-418923831) 不足以实现流畅的UI渲染,因此React团队必须实现[[自己的版本](https://github.com/facebook/react/blob/eeb817785c771362416fd87ea7d2a1a32dde9842/packages/scheduler/src/Scheduler.js#L212-L222)[](https://user-images.githubusercontent.com/1249423/53719626-94dde800-3e99-11e9-8108-1679cbf06185.png)](https://github.com/facebook/react/blob/eeb817785c771362416fd87ea7d2a1a32dde9842/packages/scheduler/src/Scheduler.js#L212-L222)。 现在,如果我们将React对组件执行的所有活动放入函数`performWork`, 并使用`requestIdleCallback`来安排工作,我们的代码可能如下所示: ```js requestIdleCallback((deadline) => { while ((deadline.timeRemaining() > 0 || deadline.didTimeout) && nextComponent)...