为什么要用 CSS-in-JS?
- 缺乏模块的概念
- 缺乏作用域的概念【CSS 类名容易重复、覆盖】
- 多选择器作用在同一个元素上、同一个选择器作用在不同的元素上,可能造成混乱
- 废弃代码:经常性地会发生,改变了类名,老的类名旧样式扔在代码文件里不会去碰的情况
- CSS 样式的顺序、继承、覆盖问题
- HTML 和 CSS 实际是强耦合的 (改结构基本意味着改样式)
- 选择器太过全能(啥都能选)
- 基于状态的样式
redux / flux 要求采用返回新对象的形式,来触发数据更新、re-render,一般推荐的做法就是采用对象结构的方式:
1 | return { |
如果要更改 state.settings.profile.darkmode
,大概就会变成这样:
1 | return { |
以上存在两个问题:
state
对象巨大(注意:对象巨大),在结构、拷贝 state 的过程中,耗时会较长state.settings.profile.darkmode
,要进行 “庞大”的工作如何解决这两个在使用 redux 过程中可能存在的问题,便是此文讨论的点。
相应的此文,此文包含内容:
不可变(Immutable)数据
不可变更新(Immutable Update)实用程序
先说结论,80% - 90% 的场景,直接使用 immer 即可
此文通过 React 实现一个三行计数器的四种写法
过程中分析各自对应的问题,以此梳理 MVC、Flux、Redux 脉络,附带
以此增强理解
以及此文所有内容,可在 flux-redux-demo 仓库 找到。
前文 JavaScript & WebAssembly 解释、编译相关
提到了不少编译相关的内容,对应的延伸,想了解下:
对应的,也搜集了如下一些文章:
因 前文 抽象语法树 AST 与 编译器 Compiler 整理了部分 抽象语法树 AST 与 编译器 Compiler 相关的内容,进一步地,会有一些问题产生:
因而,找了以下一些文章:
babel 官方在 2018-08-27 发布了文章,babel 7 正式发布,距离 babel 6 相隔3年。
包含内容(官网cp):
babel.config.js
overrides
useBuiltins
详细内容可见:Babel 7 发布
此篇文章主要介绍 babel 7 相关 presets
、plugins
、@babel 下其他所有的 packages
、babel 其他工具、以及 babel 插件相关,即 babel 全套(包含部分流程上的源码链接)
至于 AST 抽象语法树相关可见另一文 抽象语法树-AST-与-编译器-Compiler 内容。
此部分 the-super-tiny-compiler / 超级微小的编译器 内容,均摘取自 the-super-tiny-compiler-CN,先看完 the-super-tiny-compiler-CN 才有看后续的意义。
大部分编译器的工作可以被分解为三个主要阶段:解析(Parsing),转化(Transformation)以及 代码生成(Code Generation)