黄子毅

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

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

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

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

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

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

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

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

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