可视化搭建框架：画布组件元信息与数据流设计-优快云博客

本文探讨如何解决可视化搭建中组件与画布交互的问题，通过设计 Hooks API 和上下文隔离的 Designer 实例，实现了组件与画布、配置面板等的交互。介绍了访问组件实例的方法，并提供了受控和非受控模式来定义应用状态与方法。最后，总结了数据流设计的重要性，强调逻辑与 UI 分离，以及简洁、抽象的框架设计目标。

接下来需要解决两个问题：

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

这两个问题非常重要，而恰好又可以通过良好的数据流设计一次性解决，接下来让我们分别分析讨论一下。

问题一：可视化搭建的其他业务元素如何与画布交互。比如拓展属性配置面板、图层列表、拖拽添加组件、定位锚点、主题等等

需要设计一个 Hooks API，可以访问到画布提供的方法、数据。在 React 设计中，访问 Hooks API 需要在一定上下文内，所以可以将 <Designer> 拆为 <Designer> 与 <Canvas>，其中 <Designer> 提供 Hooks 上下文，<Canvas> 负责渲染画布。这样开发者的使用方式就变成了这样：

import { createDesigner } from 'designer'

const { Designer, Canvas, useDesigner } = createDesigner()

const EditPanel = {
  const { addComponent } = useDesigner()

  return <button onClick={() => addComponent(/** ... */)}>创建组件</button>
}

const App = () => {
  <Designer>
    <Canvas />
    <EditPanel />
  </Designer>
}

为了支持多个 Designer 实例间隔离，通过 createDesigner 创建一套上下文独立的 API，这样就可以让画布、配置面板同时用 Designer 实现，用一套技术方案同时实现画布与配置表单，这样学习上下文、组件规范都可以统一为一套，表单、画布能力也可以共享。

在 <Designer> 内的组件可以通过 useDesigner 直接访问数据与方法，比如上面例子在直接访问内置方法 addComponent 时，不需要附加任何参加，而 addComponent 方法也永远保持引用不变，此时 useDesigner 不会导致 EditPanel 重渲染。

如果需要访问当前组件树，并在组件树变化时重渲染，可以通过如下方式访问：

const EditPanel = {
  const { componentTree } = useDesigner(state => ({
    componentTree: state.componentTree
  }))
}

该写法的效果是，当

画布与组件元信息数据流