Excalidraw 对组件 API 的思考和设计

自从去年年底我们公布完成了编辑器的重新设计以来，许多开发人员都迫切地提到了一个问题，那就是什么时候把它发布到 Excalidraw package 中，以及为什么没有在一开始就发布它？

我们没有在第一时间发布 excalidraw.com 的原因是要满足一些定制化开发。在我们的对外公共应用中，有一些内容需要进行硬编码，例如主菜单（main menu）和欢迎页（welcome screen）-- 这些内容可能并不需要在个人的私有应用中进行硬编码 – 我们不太确定如何设计 API 以使其更易于定制。

今天，我们发布了新 API 的初始版本，之前阻塞新版本发布的那部分内容，基本都支持自定义实现。如果大家的给出的反馈是积极的，我们将继续以类似的方式公开更多的 API，以便大家可以根据个人和用户的需要来定制编辑器。

现在介绍一下我们都做了哪些事情，包括我们是如何以及为什么这么做？

---

作为重新设计的一部分，我们引入了两个新的主要内容：作为主菜单的左上角下拉菜单，以及欢迎页，包括对新用户的提示，以帮助他们了解 UI 的要点。

这里很明确的是，你会根据自己的需要来定制这些功能，更重要的是，移除你自己的应用程序中不需要的部分。

到目前为止，我们一直在使用 config objects（例如 props.UIOptions）和 render props（例如，props.renderFooter）的组合。虽然这些都很好，您可以通过这种方式完成大多数事情，但我们需要更加灵活和可组合的 API，并且使用起来更加直观。

摆脱 render props

我们希望您不仅能够渲染自定义组件（例如自定义页脚），还可以修改默认组件。之前我们通过 render props 来暴露扩展点。虽然 render props 工作得很好，但我们设计了这样一种 API，可以将所有内容都渲染为 Excalidraw 组件的子项，如下所示：

import { Excalidraw, MainMenu, Footer } from '@exca