智能小程序 Ray 开发面板 SDK —— 智能设备模型 Hooks SDK 汇总（二）

useDevice

如果尚未了解 Hooks，请先查阅 React Hooks 官方文档 了解相关概念

useDevice 基于 sdm 的实例实现，能够在智能设备信息、所处环境网络状态、蓝牙状态等变动时驱动组件重新渲染。

⚠️ 使用前请注意检查项目是否已挂载了 SdmProvider，项目接入可参考 智能设备模型 - 使用，全新项目可直接基于 public-sdm 示例项目进行开发。

代码演示

基础用法

import React from 'react';
import { View } from '@ray-js/ray';
import { useDevice } from '@ray-js/panel-sdk';
 
export default function Home() {
  const isConnected = useDevice((device) => device.network.isConnected);
  return (
    <View style={{ flex: 1 }}>
      <View>network.isConnected: {isConnected}</View>
    </View>
  );
}

自定义 rerender

useDevice 内部已经针对返回值做了 shallow equal 浅比较，无特殊场景时可无需考虑。

import React from 'react';
import { View } from '@ray-js/ray';
import { useDevice } from '@ray-js/panel-sdk';
 
export default function PageSdm() {
  const network = useDevice(
    (device) => device.network,
    (prevNetwork, nextNetwork) =>
      prevNetwork.isConnected === nextNetwork.isConnected, // 只会在返回 false 时 rerender
  );
  return (
    <View style={{ flex: 1 }}>
      <View>network.isConnected: {network.isConnected}</View>
    </View>
  );
}

👉 立即免费领取开发资源，体验涂鸦 MiniApp 小程序开发。

获取功能点模型集合

device.dpSchema 选择路径返回的是一个对象，key 为功能点 code，value 为功能点模型，device.devInfo.schema 返回的是一个数组，包含了所有功能点模型。

import React from 'react';
import { View } from '@ray-js/ray';
import { useDevice } from '@ray-js/panel-sdk';
 
export default function Home() {
  const dpSchema = useDevice((device) => device.dpSchema);
  return (
    <View style={{ flex: 1 }}>
      <View>device dpSchema: {JSON.stringify(dpSchema)}</View>
    </View>
  );
}

device.dpSchema 选择路径参考返回数据：

{
  "switch_led": {
    "attr": 641,
    "canTrigger": true,
    "code": "switch_led",
    "defaultRecommend": true,
    "editPermission": false,
    "executable": true,
    "extContent": "",
    "iconname": "icon-dp_power",
    "id": 20,
    "mode": "rw",
    "name": "开关",
    "property": {
      "type": "bool"
    },
    "type": "obj"
  },
  "bright_value": {
    "attr": 640,
    "canTrigger": true,
    "code": "bright_value",
    "defaultRecommend": true,
    "editPermission": false,
    "executable": true,
    "extContent": "",
    "iconname": "icon-liangdu1",
    "id": 22,
    "mode": "rw",
    "name": "亮度值",
    "property": {
      "min": 10,
      "max": 1000,
      "scale": 0,
      "step": 1,
      "type": "value"
    },
    "type": "obj"
  }
}

根据功能点 Code 获取功能点 ID

import React from 'react';
import { View } from '@ray-js/ray';
import { useDevice } from '@ray-js/panel-sdk';
 
export default function Home() {
  const switchId = useDevice(device => device.devInfo.codeIds.switch_led); // 已知 code 获取其 id，此处返回 20
  const switchCode = useDevice(device => device.devInfo.idCodes[20]); // 已知 id 获取其 code，此处返回 switch_led
  return (
    <View style={{ flex: 1 }}>
      <View>switchId: {switchId}</View>
      <View>switchCode: {switchCode}</View>
    </View>
  );
}

API

export declare function useDevice<
  S extends ReadonlyDpSchemaList,
  Device extends any,
>(
  selector?: (device: DeviceData<S>) => Device,
  equalityFn?: (a: Device, b: Device) => boolean,
): Device;

Result

属性	数据类型	说明
result	Device	设备信息、设备所处环境网络状态、蓝牙状态等

Params

属性	数据类型	说明
selector	(device: DeviceData<S>) => Device	用于选择和转换设备数据为所需格式的函数
equalityFn	(a: Device, b: Device) => boolean	用于比较两个设备对象是否相等的函数，如果返回 true，则不会触发重新渲染

更多信息参考：

• SDM#getDevInfo
• SDM#getDpSchema
• SDM#getNetwork
• SDM#getBluetooth

👉 立即免费领取开发资源，体验涂鸦 MiniApp 小程序开发。