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

useStructuredProps

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

useStructuredProps 基于 sdm 实例及 dp-kit 拦截器实现，能够根据配置的协议文件（protocols）自动解析并结构化复杂类型功能点，并在其状态变更时驱动组件重新渲染。

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

⚠️ 使用前请注意检查是否已配置接入了 dp-kit 拦截器，项目接入可参考 拦截器 - 使用。

⚠️ 出于 hooks 功能单一性和稳定性考虑，useStructuredProps 只会返回配置了协议规则的功能点，不会返回基础数据类型功能点。

代码演示

基础用法

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

自定义 rerender

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

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

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

API

export declare function useStructuredProps<
  S extends DpKitProtocols,
  V extends DpValue = any,
>(
  selector?: (props: GetStructuredDpState<S>) => V,
  equalityFn?: (a: V, b: V) => boolean,
): V;

Result

属性	数据类型	说明
result	DpValue	只会返回配置了协议的，结构化复杂类型功能点值

Params

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

更多信息参考：

• dp-kit

  

useStructuredActions

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

useStructuredActions 基于 sdm 实例及 dp-kit 拦截器实现，能够根据配置的协议文件（protocols）自动转化结构化复杂类型功能点数据并下发。

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

⚠️ 使用前请注意检查是否已配置接入了 dp-kit 拦截器，项目接入可参考 拦截器 - 使用。

⚠️ 出于 hooks 功能单一性和稳定性考虑，useStructuredActions 只会返回配置了协议规则的功能点下发方法。

代码演示

基础用法

import _ from 'lodash-es';
import React from 'react';
import { View } from '@ray-js/ray';
import { useStructuredProps, useStructuredActions } from '@ray-js/panel-sdk';
 
export default function Home() {
  const colour = useStructuredProps(props => props.colour_data);
  const actions = useStructuredActions();
  return (
    <View
      style={{ flex: 1 }}
      onClick={() => {
        actions.colour_data.set(
          {
            hue: _.random(0, 360),
            saturation: _.random(0, 1000),
            value: _.random(0, 1000),
          }
        );
      }}
    >
        <View>hue: {colour.hue}</View>
        <View>saturation: {colour.saturation}</View>
        <View>value: {colour.value}</View>
    </View>
  );
}

API

export declare function useStructuredActions<>(): GetStructuredActions<SmartDeviceStructuredProtocols>;

Result

属性	数据类型	说明
actions	DpAction	只会返回配置了协议的，功能点下发集合

Params

无

更多信息参考：

• dp-kit

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