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

简单组件(JSCore)

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

YIS 框架提供了类似 React.Component 的组件基类,YIS.PageCoreYIS.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 中的交互逻辑。接下来,我们来看看如何编写这样一个复杂组件。