塔希-CSDN博客

原创 Svelte 框架体积优势有多大？

Svelte 是一个新的前端框架，由 rollup 的作者编写。其口号——编译器即框架，核心思想在在于编译期做静态分析，按需生成最小的功能集来减少打包后代码体积。Svelte 的另一个特点是没有采用现在框架流行的虚拟 DOM 架构，而是直接编译生成最小操作 DOM 的代码，从而避免掉 diff 操作。所以从上述这段话可以看出，Svelte 的关键优势在两点：打包后体积小理论上性能和手写原生 JS 一样除去性能方面， Svelte 的另一个卖点就是，完成相同需求的代码，Svelte 打包后

2020-12-25 10:15:33 822 2

原创 [译]-你的 React 组件的闻起来怎么样？

来源：React component code smells译者：塔希协议：CC BY-NC-SA 4.0代码异味是什么意思？简言之，就是暗示可能存在着深层次问题的代码结构。 (Wikipedia)???? 代码异味太多的 props 传递矛盾的 props从 props 派生 state从函数中返回 JSX多个布尔类型的 state单组件中存在太多的 useState庞大的 useEffect太多的 props 传递传递多个 props 到一个组件中暗示着

2020-11-29 10:19:42 136

原创编译型 JSS 框架 Linaria 的原理

Linaria 是一个近似于 styled-components 和 emotion JSS 框架，不同点在于， styled-components 和 emotion 是一个运行时方案，而 Linaria 是一个编译期 + 运行时方案。运行时的 JSS 方案必须内置一个 CSS 处理器，并且在运行时去解析，分别增加了体积和性能上的成本。 Linaria 创造性的在编译期将相应的 JSS 解析出来，抽出解压到一个 CSS 文件中，并将相应的 JSS 代码替换成一个指向某个 css 类名的字符串，

2020-11-22 10:07:03 499

原创《深入浅出面向对象分析与设计》读书笔记

《深入浅出面向对象分析与设计》读书笔记这本书整体在说些什么？本书整体上主要讲如何使用 OO 的方式去编写程序，通过使用那些 OO 原则是如何使得程序变得高内聚低耦合，并在讲述的过程结合实例进行分析。这本书的正确性？本书作为一本定位为入门级别的书籍，再加上时代的发展，肯定有其局限性，但是全本看下来，大部分知识依旧是有用的，特别是讲练结合的教学方式，能够切实体验到各种抽象模式起到的作用和优势，作为一本入门面向对象编程的书籍再合适不过了。其次，本书提供了一套采用面向对象思想开发程序的方法论，也许对于天才

2020-11-17 13:12:30 452 1

原创展望 react-cache，一个 React 官方的处理数据副作用方案

我自认不比写 React 的人更懂 React ，因此相关的哲学理念层面上的思考、相比传统方式的优劣的讨论我就不献丑了，请大家自行阅读这篇官方文档，这篇文章只介绍 react-cache 的使用方式和原理。Suspense相信做过 React 代码分割的同学基本上对 Suspense 都比较了解，但是 Suspense 其实并不是局限于加载异步组件，而是有着一种更通用的范围。为了更好的理解 react-cache 的原理，我们事先需要了解 Suspense 的运作流程。错误边界(Error Bou

2020-11-15 20:12:49 1135

原创 Linaria 也许是现在 React 最佳的 JSS 方案

React 社区一直在探索各种 JSS 方案，比如现在比较出名的 styled-components ，但他们或多或少都有些问题存在，但是社区对 JSS 方案的探索一直没有停下，而现在看上去最像最佳方案的是 Linaria 库。翻了下这个库相关的中文资料几乎没有，于是写了这篇与大家分享介绍下相关的内容介绍Linaria 是一个零运行时的JSS 框架，其特点有：将 CSS 纳入到 JS 体系中，并且这种支持是零成本的！ CSS 相关代码会在编译期被抽出到 CSS 文件中类 Sass 的 CSS

2020-10-23 15:30:11 1367

原创 [译]-100行代码从零实现 Facebook 的 Recoil 库

来源：Rewriting Facebook’s “Recoil” React library from scratch in 100 lines译者：塔希协议：CC BY-NC-SA 4.0AtomsRecoil 是围绕着 “atoms” 这个概念构建的。Atoms 是组成整个状态中的原子性的一部分，你可以在组件中订阅它或更改它的值。开始，我将创建一个叫做 Atom 的类，用来包裹一些值 T 。我加了一些辅助方法 update 和 snapshot 允许你获得或更改 Atom 的值。.

2020-10-02 21:08:05 514

原创在 2020 年用 Rust 写前端什么体验

在 2020 年用 Rust 写前端什么体验Rust 语言是一门有趣的语言，在学习 Rust 后我想找点东西实践下，然后就发现了由 Rust 编写可以用 Rust 编写网页的 Yew 框架。由于对 Rust 相关工具链的不熟悉，我感觉自己回到了刚刚接触 React + Webpack 的时候，一脸懵逼，什么都没有头绪的样子。那个时候，我写了个 Todo 应用来帮助自己熟悉工具链，现在当然是继续重复作为菜鸟时做的事情，写一个 Todo 应用来熟悉工具链！介绍什么是 Yew？Yew 是一个设计先进的 R

2020-09-30 13:46:21 2824

原创为什么 React17-rc.2 要发布新的 jsx 转换逻辑

为什么 React17-rc.2 要发布新的 jsx 转换逻辑React 17.0.0-rc.2 不久前发布，并带来了有关 JSX 新的特性：用 jsx() 函数替换 React.createElement()自动引入 jsx() 函数举个例子就是以下代码// hello.jsxconst Hello = () => <div>hello</div>;会被转译为// hello.jsximport {jsx as _jsx} from 'react/

2020-09-24 20:32:42 475

原创 BigPipe 的原理和实现

是什么BigPipe 是 Facebook 在 2010 年中一篇博文专门介绍的可以提高页面加载速度的网页架构。通过在基础层面重新设计服务器如何交付动态网页，大幅度提高了网页的加载速度。并且，这个结果，是在不改变现有 Web 技术架构的情况下达成的。大体上，是通过将网页分割为被称为 pagelet 的小块，然后逐一通过由服务器和浏览器产生的操作组成的流水线，当一个 pagelet 经历完流水线后可以立即交付给用户，即在前端展示出来，而不会被其他 pagelet 的加载阻塞掉。动机那么 Faceb

2020-08-24 21:42:31 2532

原创 Less code, more Imutable - Immer 介绍 + 源码解读

Less code, more Imutable - Immer 介绍 + 源码解读介绍immer 是 mobX 的作者编写的简化操作 immutable 数据的库。immer 通过使用 Proxy 元编程，使得我们能以一种更简单清晰的方式去处理 immutable 特性的数据。例子最直接的好处就是使得我们的代码变得清晰，比如在编写 redux reducer 时，我们需要保证返回新的 state 对象，如果使用深克隆在性能上会带来损耗，如果使用 … 运算符，在面对复杂结构时，则会使得代码变得复

2020-08-19 16:44:17 669

原创如何利用 Typescript 的类型编程自动推断 Redux reducer 的类型

今日，使用 ts 几乎已经变成前端的政治正确了。虽然 ts 的自动类型推导已经很强大了，但受限于 js 语言本身，我们依然需要手写很多的类型，并且手动的去指定。比如说在使用 ts 编写 redux 的 reducer 时，我们该怎样保证 action 类型的正确性呢？简单，但不正确最简单的，我们可以这么写type Action = { type: string; payload: unknown;}function reducer(state: {}, action: Action)

2020-08-15 20:50:55 1560

原创 macos下webpack打包node项目遇到的关于二进制模块fsevents的坑

项目背景leader给了一个需求，将一个node项目适配到云函数上，其中最大的问题就是依赖问题，由于用到一些私有的依赖，不能使用官方提供的在线安装依赖功能，只能自己把node_module打包，上传。由于node_modules很容易就几百m大小，这么大小的文件传递到云函数上非常的不方便，于是准备通过webpack将项目打包成单文件js，然后上传到云函数上执行问题开始在linux下编写代码，进行webpack打包一切正常，由于一些原因转移到imac上开发，我满怀欣喜的写完代码，准备打包上传，然后结束战

2020-08-04 10:22:17 3399 1

原创 React 16 事件系统详解及源码解析（1）——注入平台插件

react为了跨平台的需求，事件系统采用的是插件注入的形式，这样只要针对不同的平台注入相应的事件插件就能复用react的事件系统了第一步：注入事件插件react事件系统初始化的第一步就是注入平台相关的插件，打开react-dom package client平台下的ReactDOM.js，可以看到顶层的导入有这么一句// ....some codesimport './ReactDOMClientInjection';// ...some codes就是这个ReactDOMClientIn

2020-06-20 12:22:20 399

原创《如何阅读一本书》笔记-如何进行分析阅读

开始之前对一本书进行分析阅读之前，首先要确定两个关键问题。这本书值得一读吗？值得用分析阅读吗？为了得出这两个问题的答案，要先使用检视阅读过一遍书籍。检视阅读步骤一看书名页和目录页-了解本书主题，归类书籍研究目录页-概括性的理解书籍基本架构研究索引页-评估书籍议题范围，了解索引书籍种类和作者看下封皮-了解书籍主旨阅读可能和主题有关的章节随意阅读几页，特别是最后几页二头一次面对一本难读的书的时候，从头到尾先读完一遍，碰到不懂的地方不要停下来查询或思索这个阶段，你需

2020-06-19 08:43:39 194

原创 Redux源码全解析

正文当你想要阅读一个项目的源码，感到不知所措，从何开始时。最简单有效的办法是从，项目的入口文件，通常是 index.js 开始读。从入口文件向外暴露的 API 为起点，一步步追根溯源，逐渐理清脉络，算是比较简单容易施行的方法。这里我们先看下 Redux 的入口文件，以及向外部的暴露的 APIRedux 在某个版本后，使用了 TS 重写整个项目，为了减少本文的长度，展示的代码删除了对类型文件的导入和导出。index.ts// functionsimport createStore from '

2020-06-16 15:13:40 342

原创深入理解 React useLayoutEffect 和 useEffect 的执行时机

我们先看下 React 官方文档对这两个 hook 的介绍，建立个整体认识useEffect(create, deps):该 Hook 接收一个包含命令式、且可能有副作用代码的函数。在函数组件主体内（这里指在 React 渲染阶段）改变 DOM、添加订阅、设置定时器、记录日志以及执行其他包含副作用的操作都是不被允许的，因为这可能会产生莫名其妙的 bug 并破坏 UI 的一致性。使用 useEffect 完成副作用操作。赋值给 useEffect 的函数会在组件渲染到屏幕之后执行。你可以把 effect

2020-06-08 13:02:44 10651 2

网络篝火