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](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)...