组件注册与画布渲染

[ascoders]

上一章我们讨论了如何抽象可视化搭建，这次我们讨论更实际的内容：组件如何注册、画布结构与渲染。

---

组件注册与画布渲染

[yanghuanrong]

/***
由于组件树结构需要序列化入库，所以必须为一个可以序列化的 JSON 结构，
而这个结构又需要暴露给开发者，所以也不适合定义一些 hack 的序列化、
反序列化规则。因此要给组件 props 注入函数，需要定义在组件元信息上，
由于其定义了额外的 props 属性，且不在组件树中，所以我们将其命名为 runtimeProps:
**/
const divMeta = {
  componentName: "div",
  runtimeProps: () => ({
    onClick: () => { console.log('click') }
  })
  element: ({ onClick }) => (
    <button onClick={onClick}>
      点击我
    </button>
  ),
};
// 点击按钮后，会打印出 click。这是因为 runtimeProps 定义了函数类型 onClick 在运行时传入了组件 props。

不知道我理解的对不对，这样设计就可以让element函数对接任意组件库，runtimeProps其实就可以是任意组件自身的props

[ascoders]

@yanghuanrong 是的，因为元信息不入库，可以写函数。后面还会说到拓展出 selector 语法，使 runtimeProps 可以根据全局状态驱动，或者组件 props 的变化而驱动，生成一些新的函数注入到组件 props。

[yanghuanrong]

@yanghuanrong 是的，因为元信息不入库，可以写函数。后面还会说到拓展出 selector 语法，使 runtimeProps 可以根据全局状态驱动，或者组件 props 的变化而驱动，生成一些新的函数注入到组件 props。

那这样的话，组件与组件之间应该就可以互相通信，根据不同的数据状态去做不同的渲染。非常期待下一章节。

[samwangdd]

非常受益，目前正在针对业务开发低代码产品。我很好奇，博主怎么获取低代码相关知识的？