前端精读周刊

组件联动是指几个组件相互关联。也就是当一个组件状态变化时，其他组件可以响应。 组件联动是多对多关系的，且目的分为一次性与持续性： 多对多关系：即一个组件可以同时被多个组件联动；多个组件可以同时联动一个

可视化搭建会遇到如下三类容器组件： 简单容器：以 children 容纳子组件的容器。 卡片容器：以 props.header 加上 props.header 等多个插槽容纳子组件的容器。 Tab 容

在设计好画布与组件数据流体系后，理论上主体功能已经完成，但缺乏方便易用的 API，所以还需要内置一些状态与方法。 但是内置状态与方法必须寻求业务的最大公约数，极具抽象性，添加需慎重。 接下来我们从必须

接下来需要解决两个问题： 可视化搭建的其他业务元素如何与画布交互。比如拓展属性配置面板、图层列表、拖拽添加组件、定位锚点、主题等等。 runtimeProps 如何访问到当前组件实例的 props。

接着可视化搭建的理论抽象，我们开始勾勒一个具体的 React 可视化搭建器。-------------

在做任何可视化搭建项目时，第一步都要思考如何抽象。 如果不抽象，当搭建项目做到后期可能会出现 API 杂乱，难以维护的问题；做到一半甚至会怀疑为什么需要一个搭建框架，怀疑把框架去掉会不会效率更高

经过上一篇 精读《磁贴布局 - 功能实现》 的介绍，这次我们进入性能优化环节。 精读 磁贴布局性能优化方式有很多，比如通过空间换时间，存储父子关系的索引，方便快速查找到目标组件。但有一个最核心的性能优

经过上一篇 精读《磁贴布局 - 功能分析》 的分析，这次我们进入实现环节。 精读 实现磁贴布局前，先要实现最基础的组件拖拽流程，然后我们才好在拖拽的基础上增加磁贴效果。

磁贴布局三部曲：功能分析、实现分析、性能优化的第一部 - 功能分析。 因为需要做自由布局与磁贴布局混排，以及磁贴布局嵌套，所以要实现一套磁贴分析功能

现在许多国内互联网公司的项目都持续了五年左右，美国老牌公司如 IBM 的项目甚至持续维护了十五年，然而这些项目却有着截然不同的维护成本，有的公司项目运作几年后维护成本依然与初创期不大，可以保持较为高效

emotion 排名第二的维护者 Sam 所在公司弃用了 css-in-js 方案，引起了不小的讨论：Why We're Breaking Up with CSS-in-JS

本周精读的文章是 Iterables 与 Iteration protocols，按照为什么需要迭代器、迭代器是如何设计的，我们还能怎么利用迭代器展开来讲。

符号 ... 在 JS 语言里同时被用作 Rest 与 Spread 两个场景，本周我们就结合 Rest vs Spread syntax in JavaScript 聊聊这两者的差异以及一些坑。

如何为 TS 类型写单测呢？ 最简单的办法就是试探性访问属性，如果该属性访问不到自然会在异常时出现错误。

Headless 组件即无 UI 组件，框架仅提供逻辑，UI 交给业务实现。这样带来的好处是业务有极大的 UI 自定义空间，而对框架来说，只考虑逻辑可以让自己更轻松的覆盖更多场景，满足更多开发者不同的

proposal-extractors 是一个关于解构能力增强的提案，支持在直接解构时执行自定义逻辑。

本周读一读 State of CSS 2022 介绍的 CSS 特性。2022 已经支持的特性 @layer...

精读文章：Dependency Injection in JS/TS – Part 1。依赖注入是将函数内部实现抽象为参数，使我们更方便控制这些它们。

SolidJS 是一个语法像 React Function Component，内核像 Vue 的前端框架，本周我们通过阅读 Introduction to SolidJS 这篇文章来理解核心概念。

可能一些同学会认为前端比较简单而不需要架构，或者因为前端交互细节杂而乱难以统一抽象，所以没办法进行架构设计。这个理解是片面的，虽然一些前端项目是没有仔细考虑架构就堆起来的，但这不代表不需要架构设计。