背景

最近答疑群里好多人经常有人问 const app = useXFlowApp 的使用。

个人感觉这东西还是挺重要，感觉可以专门写个文档放到官网上。大概加到这个位置

App 实例

App 的 XFlow 向外暴露的一个重要对象，它上面挂载了很多重要的属性和方法。

获取方式

XFlow 提供了 useXFlowApp 这个 hook 用于获取 App 实例。

import { useXFlowApp } from '@antv/xflow'
export const demo = () => {
  const app = useXFlowApp();
  return <div><div/>
}

使用注意

• useXFlowApp 是基于 React Context 实现的，并且它本身是个 Hook，所以只能在 XFlow 工作台组件的子组件下或自定义 hook 中使用。
• App 实例是异步加载的，所以在组件内使用时，需要先判断是否为 null，以防止报错。
• 

  属性和方法

  App 实例是由类(Class)实例化产生的，上面有众多方法和属性。

  属性

  | 属性名 | 类型接口 | 描述 | 是否只读 | | —- | —- | —- | —- | | graphProvider | IGraphProvider | Graph 图提供者 | 只读 | | commandService | IGraphCommandService | 命令中心 | 只读 | | modelService | IModelService | 全局状态管理中心 | 只读 |

方法

注意事项
以上方法中，同步方法会直接返回值，但是异步方法返回的是一个 Promise。