---
title: RJS
---

# Rendering Script

## Overview

- A rendering script (RJS) is designed to process high-frequency drawing tasks in Smart MiniApp. To develop a Panel MiniApp, the `Ray` framework is recommended.
- The operating environment, instance methods, and things to note for the `RJS` are described in [Rendering Script for Smart MiniApp](/en/miniapp/develop/miniapp/framework/api/render#render-script). This topic also applies to `RJS` development on top of the `Ray` framework.

## Example

```js
// page/index.tsx
import React from 'react';
import Chart from '@/components/chart';
import { usePageInstance, usePageEvent } from '@ray-js/ray';

import Render from './index.rjs';

export default () => {
  const ctx = usePageInstance();
  usePageEvent('onShow', function () {
    /**
     * Things to note about using .rjs on WeChat
     * 1. Use .rjs on pages
     * The React component is used in Ray. Even the native component in hybrid development is still regarded as the React component.
     * Due to the restrictions of WeChat miniApps, the nodes of native components for miniApps cannot be directly obtained to render pages.
     * To use .rjs on pages, you must first get the instances of native components.
     */
    const compInst = ctx.selectComponent('#xx'); // Use `selectComponent` of the page instance to get the native component instance.
    const render = new Render(compInst);
    setTimeout(() => {
      render.getDOMByRJS().then(() => {
        render.getDocument();
      });
    }, 500);
  });

  return <Chart title="rjs demo from rjs" id="xx" type="2d" />;
};
```

```js
// page/index.rjs
// render js Only the canvas node can be obtained.
const LOG_PREFIX = 'Page rjs: ';

export default Render({
  // module.exports = Render({
  document: null,
  x: 111,
  getDOMByRJS() {
    return getCanvasById('chart', this).then((chart) => {
      console.log(LOG_PREFIX, 'getDOMByRJS 1', chart);
    });
  },
  getDocument() {
    console.log(LOG_PREFIX, 'getDocument', this.document);
  },
});
```

- The following code block shows the chart component.

```js
// @/components/chart/index.js
import Render from './index.rjs';
Component({
  lifetimes: {
    attached() {
      this.rjs = new Render(this);
    },
    ready: function () {
      this.rjs.getDOMByRJS();
    },
  },
  methods: {
    myFn: function (args) {
      console.log('this my function', args);
    },
  },
});
```

```js
// @/components/chart/index.rjs

export default Render({
  // module.exports = Render({
  getDOMByRJS() {
    getCanvasById('chart', this).then((res) => {
      console.log('Component rjs: getDOMByRJS', res);
    });
  },
});
```

```js
// @/components/chart/index.tyml
<canvas canvas-id="chart" id="chart" type="2d" />
```

```js
// @/components/chart/index.wxml
<canvas canvas-id="chart" id="chart" type="2d" />
```

```js
// @/components/chart/index.json
{
  "component": true
}

```

## Things to note

- The preceding examples apply to both WeChat and Smart MiniApp. To run them on WeChat, the Ray version must be `v0.7.12` or later.
- When you run `getCanvasById` on WeChat, set its second parameter to pass in an instance of components or pages.
- Due to the restrictions of WeChat miniApps, the nodes of native components for miniApps cannot be directly obtained to render pages. To use `.rjs` on pages, you must first call `usePageInstance` to get the page instance, then use `selectComponent` to get the native component instance.