单设备支持群组支持支持

useProps(selector?: (props: DpState) => DpValue;, equalityFn?: (prevDpValue: DpValue, nextDpValue: DpValue) => boolean)

版本要求:
@ray-js/panel-sdk≥1.2.0

描述

获取智能设备功能点状态，功能点变动时驱动组件重新渲染

参数

参数类型必填说明
selector(props: DpState) => DpValue;否选择器函数，入参为当前设备环境下的全量功能点状态。 具体属性由 devices/schema.ts 中的 as const Schema 定义推导， 类型映射规则：bool → boolean, value/bitmap → number, enum/string/raw → string，详见示例代码
equalityFn(prevDpValue: DpValue, nextDpValue: DpValue) => boolean否自定义比较函数，返回 true 则不触发重渲染

返回值

类型：DpValue
通过 selector 选择器选择后返回的功能点值，类型基于业务项目提供的 Schema 定义，按 property.type 自动推导值类型

引用对象

typeDpState功能点状态对象，key 为功能点 code，value 为功能点值
export type DpState = Record<string, DpValue>;
typeDpValue功能点值类型，可能为 boolean、number、string
export type DpValue = boolean | number | string;

示例代码

基础用法

// 1. devices/schema.ts — as const 是类型推导的基石，基于业务项目提供的 Schema 定义，按 property.type 自动推导值类型
export const schema = [
  { code: 'switch_led', property: { type: 'bool' }, type: 'obj', mode: 'rw', id: 1, name: 'Switch' },
  { code: 'work_mode', property: { type: 'enum', range: ['white', 'colour'] }, type: 'obj', mode: 'rw', id: 2, name: 'Mode' },
  { code: 'brightness', property: { type: 'value', min: 10, max: 1000, step: 1 }, type: 'obj', mode: 'rw', id: 3, name: 'Brightness' },
  { code: 'fault', property: { type: 'bitmap', maxlen: 8 }, type: 'obj', mode: 'ro', id: 4, name: 'Fault' },
  { code: 'colour_data', property: { type: 'string', maxlen: 14 }, type: 'obj', mode: 'rw', id: 5, name: 'Colour' },
] as const;

// 2. useProps — 按 property.type 自动推导值类型
import { useProps } from '@ray-js/panel-sdk';

const power = useProps(dpState => dpState.switch_led);       // → boolean
const mode = useProps(dpState => dpState.work_mode);         // → string
const bright = useProps(dpState => dpState.brightness);      // → number
const fault = useProps(dpState => dpState.fault);            // → number
const colour = useProps(dpState => dpState.colour_data);     // → string

自定义 rerender

// 不传 selector 返回全量状态，则任意功能点变化都触发重渲染
const dpState = useProps(
  dpState => dpState,
  (prevDpValue, nextDpValue) => prevDpValue.switch_led === nextDpValue.switch_led, // 只会在返回 false 时 rerender
);

获取所有功能点状态

// 除非当前页面或组件需要监听所有功能点的变化，否则请勿使用该方式，会导致当前页面或组件出现性能问题，频繁进行无效的重复渲染。
import { useProps } from '@ray-js/panel-sdk';

const dpState1 = useProps();
const dpState2 = useProps(props => props);