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

useProps

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

useProps 基于 sdm 实例的 model.props 实现，能够在智能设备功能点变动时驱动组件重新渲染。

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

代码演示

基础用法

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

自定义 rerender

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

import React from 'react';
import { View } from '@ray-js/ray';
import { useProps } from '@ray-js/panel-sdk';
 
export default function Home() {
  const dpState = useProps(
    (d) => d,
    (prevDpState, nextDpState) => prevDpState.power === nextDpState.power, // 只会在返回 false 时 rerender
  );
  return (
    <View style={{ flex: 1 }}>
      <View>power: {dpState.power}</View>
    </View>
  );
}

获取所有功能点状态

⚠️ 除非当前页面或组件需要监听所有功能点的变化，否则请勿使用该方式，会导致当前页面或组件出现性能问题，频繁进行无效的重复渲染。

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

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

API

export declare function useProps<
  S extends ReadonlyDpSchemaList,
  V extends DpValue = any,
>(
  selector?: (props: GetSmartDeviceModelProps<S>) => V,
  equalityFn?: (a: V, b: V) => boolean,
): V;

Result

属性	数据类型	说明
result	DpValue	匹配选择器的功能点集合或功能点值

Params

属性	数据类型	说明
selector	(props: GetSmartDeviceModelProps<S>) => V	用于选择器函数，将 props 转换为所需的值
equalityFn	(a: V, b: V) => boolean	用于比较两个值是否相等的函数，如果返回 true 则不会驱动视图刷新

更多信息参考：

• SDM#model.props

useActions

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

useActions 基于 sdm 实例的 model.actions 实现。

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

代码演示

基础用法

import React from 'react';
import { View } from '@ray-js/ray';
import { useProps, useActions } from '@ray-js/panel-sdk';
 
export default function Home() {
  const switch_1 = useProps(props => props.switch_1);
  const actions = useActions();
  return (
    <View
      style={{ flex: 1 }}
      onClick={() => {
        actions.switch_1.toggle();
      }}
    >
      <View>socket.switch_1: {switch_1}</View>
    </View>
  );
}

API

export declare function useActions<T extends DpSchema[]>(): GetSmartDeviceModelActions<T>;

Result

属性	数据类型	说明
actions	DpAction	功能点上报行为集合

Params

无

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