本节将介绍如何基于 React 和 JSX 开发自定义组件。你如果已经有一些 React 开发经验，会发现跟你之前的开发体验没有太大区别。

简单组件（JSCore）

我们首先来看如何开发一个简单的组件。这里的 简单 是指：这个组件只需要处理 JSCore 相关的逻辑，大多数业务逻辑相关的组件都是简单组件。如果你不是特别清楚组件的运行机制，可以查看上一节中的 组件运行机制 来了解更多。

YIS 框架提供了类似 React.Component 的组件基类，YIS.PageCore 和 YIS.Component。

• PageCore：封装页面级别的生命周期，以及一些 webview 设置相关的 API。属于页面级别的基类。相关的内容已经在前面的章节中有较详细的介绍，请参考 PageCore。
• Component：封装组件级别的生命周期，类似 React.Component。

PageCore 已经在前面章节中介绍过了。我们在这里详细介绍 YIS.Component。YIS.Component 提供了类似 React.Component 的生命周期，主要包括：

• constructor
• render
• componentWillMount
• componentWillReceiveProps
• shouldComponentUpdate
• componentWillUpdate
• componentWillUnmount

需要注意的是，所有的生命周期回调都是 componentWillXXX，这是因为逻辑层和 UI 层的分离导致无法获取准确的 componentDidXXX 的时间点。更多组件生命周期的介绍请参考 组件运行机制。

import { Component } from '@qnpm/yis';

export default class Test extends Component {
    constructor() {}

    // ...
    // 生命周期钩子
    // ...

    render() {}
}

在某些场景里，可能需要处理自定义的手势操作或者复杂的 UI 交互，这个时候不仅需要编写 JSCore 中的业务逻辑，还需要处理 Webview 中的交互逻辑。接下来，我们来看看如何编写这样一个复杂组件。