codingmeup

### Web Worker为javascript带来了什么，以及典型的应用场景 可以加载一个JS进行大量的复杂计算而不挂起主进程，并通过postMessage，onmessage进行通信，解决了大量计算对UI渲染的阻塞问题。 1. 数学运算 Web Worker最简单的应用就是用来做后台计算，对CPU密集型的场景再适合不过了。 2. 图像处理 通过使用从中获取的数据，可以把图像分割成几个不同的区域并且把它们推送给并行的不同Workers来做计算，对图像进行像素级的处理，再把处理完成的图像数据返回给主页面。 3. 大数据的处理 目前mvvm框架越来越普及，基于数据驱动的开发模式也越愈发流行，未来大数据的处理也可能转向到前台，这时，将大数据的处理交给在Web Worker也是上上之策了吧。 4. 懒加载 ### 注意事项 1. 有同源限制 2. 无法访问 DOM 节点 3. 运行在另一个上下文中，无法使用Window对象 4. Web Worker...

### fiber React 核心的算法包含了三个核心部分，分别是Scheduler(用于决定何时去执行)， Reconciliation(决定哪部分需要更新, 阉割版的vdom数据结构的最小编辑树算法)，Renderer（使用 Reconciliation 的计算结果，然后将这部分差异，最小化更新到渲染容器）。 实际上，**fiber 做的事情就是将之前 react 更新策略进行了重构**。fiber 正是模拟了调用栈，并且通过链表来重新组织，一方面使得我们可以实现 chunks（不用1口气做完，营造出不卡分片效果） 的功能。 另一方面可以和 VDOM 进行很好的对应和映射。那么 fiber 是如何完成“增量更新”呢？ 秘诀就是它相当于“重新实现了浏览器调用栈”。 ```js 传统调用栈 fiber 子函数 component type 函数嵌套 child 参数...

### [实战] 为了学好 React Hooks, 我抄了 Vue Composition API, 真香 Vue Composition API 是 Vue 3.0 的一个重要特性，和 React Hooks 一样，这是一种非常棒的逻辑组合/复用机制。尽管初期受到不少[争议](https://juejin.im/post/5d0f64d4f265da1b67211893)，我个人还是比较看好这个 API 提案，因为确实解决了 Vue 以往的很多痛点, 这些痛点在它的[ RFC 文档](https://vue-composition-api-rfc.netlify.com/#motivation)中说得很清楚。动机和 React Hooks 差不多，无非就是三点:...

[react hooks 场景](https://juejin.im/post/5d594ea5518825041301bbcb) [react 组件封装 mixin -> hoc -> hook](https://juejin.im/post/5cdc2f54e51d453b0c35930d#heading-3)

1. React 与 JSX React是基于JSX，JSX则几乎拥有了JS所有的灵活度，在开发中我们也可以深感其便利，Dom中开一个大括号就可以写JS逻辑判断，甚至使用map动态生产列表。 JSX通过Balel编译形成数组，再使用React.createElement创建为节点。由此可见，JSX在React中的使用非常灵活。React对v-dom的处理也非常灵活，一切皆是组件。 但是，过度灵活就会付出更多的性能代价用于Diff Tree，虽然可以从组件层面进行Diff，避免渲染，但在组件内部，还是要逐一进行比较的，Reat很难去追踪一个组件里，哪一部分Dom是静态。为此，React16推出Fiber更新策略，采用时间分片和任务优先调度去解决长时间Diff导致主线程被占用，从而导致页面动画渲染以及各种点击事件被阻塞，带给用户卡顿感的问题。 2. Vue 与 template Vue 3中使用Block Tree（区块树），将template划分为结构性指令v-for、v-if内部和外部，使用Array去追踪会发生改变的节点，极大的减少不必要的Diff操作。 Vue数据绑定，基于defineProperty，进行set，get。但JS希望对象更加稳定，而不是经常会被改动，这样有利于性能优化，因此Vue3将向ES6中的Proxy迁移，Proxy严格来说只是在被操作对象外部进行了一个包装拦截。因此，即使Fiber很优秀，但Vue可以通过更快，而不需要使用Fiber。···大概就是只要我跑得够快，Fiber就追不上我

### Mixin & HOC vs Hook > ，这里用 compose 函数组合了好几个 HOC，其中还有 connect 这种 接受几个参数返回一个接受组件作为函数的函数 这种东西，如果你是新上手（或者哪怕是 React 老手）这套东西的人，你会在 「这个 props 是从哪个 HOC 里来的？」，「这个 props 是外部传入的还是 HOC 里得到的？」这些问题中迷失了大脑，最终走向堕落 「Mixin & HOC 模式」所带来的缺点整理一下。...

### Vue2 目前存在的问题 抛出 Vue2 的代码模式下存在的几个问题。 - 随着功能的增长，复杂组件的代码变得越来越难以维护。 尤其发生你去新接手别人的代码时。 根本原因是 Vue 的现有 API 通过「选项」组织代码，但是在大部分情况下，通过逻辑考虑来组织代码更有意义。 - 缺少一种比较「干净」的在多个组件之间提取和复用逻辑的机制。 - 类型推断不够友好。

### 自定义HOOK - useFetch ```js import { useState, useEffect } from 'react'; const useFetch = (url = '', options = null) => { const [data, setData] = useState(null); const [error,...


### 特殊细节点 - 图片处理 在移动web页面上渲染图片，为了避免图片产生模糊，图片的宽度应该用物理像素单位渲染，即是100 * 100的图片，应该使用100dp * 10dp。 width：（w_value/dpr）px； height：（w_height/dpr）px； - 1px 像素边框 flexible方案整合解决了 也可以用1px尺寸的带背景色元素然后scaleX(0.5)或scaleY(0.5)实现0.5px效果。比如要实现一个元素的下边框1px效果：.item { position: relative; } .item:after { content: ''; display: block; position: absolute; width: 100%;...