黄子毅

由于 React 的特点，组件改变所在父级后会产生 Remount，而在可视化搭建场景存在两个特点： 自由、磁贴、流式布局都可以通过拖拽轻松改变组件父元素。 大数据量下组件...

组件值校验，即在组件值变化时判断是否满足校验逻辑，若不满足校验逻辑，可以拿到校验错误信息进行错误提示或其他逻辑处理。 声明 valueValidator 可开启值校验： 如...

虽然底层框架提供了通用的组件值与联动配置，可以建立对组件任意 props 的映射，但这只是一个能力，还不是协议。 业务层是可以确定一个协议的，还要让这个协议具有拓展性。 我...

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

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

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

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

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

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

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

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

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

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

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

本周精读的文章是 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......