组件

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 层中使用这些组件即可。

• 点击：View 组件
• 滚动：Page 组件、Scroller 组件

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