组件

YIS 是一个组件化的框架,虽然是逻辑层和 UI 层分离的架构,但是依旧是通过组件来组织逻辑的。

1. 组件的使用

由于 YIS 是基于 React 和 JSX 的,所以组件的使用也是一样的。框架内置的组件的 API 可以查看 YIS 组件

import { Page, Button } from '@qnpm/yis/components';

通过 @qnpm/yis/components 可以引用框架提供的组件,但是需要注意:由于打包机制的原因,我们暂不提供通过 @qnpm/yis/componets/组件名 的方式来引用组件。

2. 组件的运行机制

组件交互

在逻辑层和 UI 层分离的架构中,所有的组件都分为逻辑层和 UI 层两部分。

  • 逻辑层:运行在 JSCore 中的组件代码,使用 React、JSX 构建组件的逻辑,与 React 的组件的构造基本相同。逻辑层对外输出虚拟 dom 树,并且响应从 UI 层传递过来的事件消息。
  • UI 层:根据逻辑层输出的虚拟 dom 树绘制出真正的 dom 节点,并且根据用户的手势操作给逻辑层发消息。

组件交互

上图就是逻辑层和 UI 层的交互过程。逻辑层处理对应的逻辑,向 UI 层输出每次虚拟 DomDiff 产生的结果,然后由 UI 层渲染出页面。而 UI 层和逻辑层除了 DomDiff 还会通过消息进行交互:UI 层接收到事件,通过消息通知逻辑层;逻辑层向 UI 层发送消息触发一些特定 UI 操作等。

组件生命周期

由于分层的架构,组件的生命周期被拆分到了逻辑层和 UI 层中。

组件生命周期

与 React 相同的是,组件也有对应的:加载、更新、卸载三个阶段。但是每个阶段的 componentDidXXX 和 componentWillXXX 被拆分到不同的层中。所以,在 JSCore 中,组件只有 willXXX 的阶段。

虽然每个组件都分为逻辑层和 UI 层,但是,由于大多数手势操作相关的基础组件都已经由框架提供了,你并不需要自己来处理这些手势操作相关的逻辑。你只需要通过这些基础组件封装出需要的逻辑,即:你需要在 JSCore 层中使用这些组件即可。



接下来,我们将介绍如何开发自定义组件。