智能小程序 Ray 开发面板 SDK —— 状态管理 SDK 汇总（一）

状态管理

本章仅适用于 Ray / React 项目

Hooks

推荐使用 SdmProvider 搭配 Hooks

• src 业务源码目录
  • devices 智能设备模型目录
    • index.ts 定义并导出智能设备模型
    • schema.ts 当前智能设备 DP 功能点描述
  • pages 页面目录
    • home 首页
      • index.tsx 首页组件
  • app.tsx App 根组件

挂载 SdmProvider

// src/app.tsx
import React from 'react';
import 'ray';
import '@/i18n';
import { kit, SdmProvider } from '@ray-js/panel-sdk';
import { devices } from '@/devices';
 
const { initPanelEnvironment } = kit;
 
interface Props {
  children: React.ReactNode;
}
 
initPanelEnvironment({ useDefaultOffline: true });
 
export default class App extends React.Component<Props> {
  onLaunch() {
    console.info('=== App onLaunch');
  }
 
  render() {
    return (
      <SdmProvider value={devices.robot}>{this.props.children}</SdmProvider>
    );
  }
}

使用 Hooks

// src/pages/home/index.tsx
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>
  );
}

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

Context

• src 业务源码目录
  • context Context 目录
    • network.tsx Network Context
  • devices 智能设备模型目录
    • index.ts 定义并导出智能设备模型
    • schema.ts 当前智能设备 DP 功能点描述
  • pages 页面目录
    • home 首页
      • index.tsx 首页组件
  • app.tsx App 根组件

创建 Context

// src/context/network.tsx
import React from 'react';
import { SmartDeviceModelNetwork } from '@ray-js/panel-sdk';
import { devices } from '@/devices';
 
interface Props {
  value: SmartDeviceModelNetwork;
}
 
const DEFAULT_NETWORK = {} as SmartDeviceModelNetwork;
 
export const NetworkContext =
  React.createContext<SmartDeviceModelNetwork>(DEFAULT_NETWORK);
 
export const NetworkProvider: React.FC<Props> = (props) => {
  const [network, setNetwork] = React.useState<SmartDeviceModelNetwork>(
    props.value,
  );
  React.useEffect(() => {
    const id = devices.robot.onNetworkStatusChange((data) => {
      setNetwork({ ...network, ...data });
    });
    return () => {
      devices.robot.offNetworkStatusChange(id);
    };
  }, []);
  return (
    <NetworkContext.Provider value={network}>
      {props.children}
    </NetworkContext.Provider>
  );
};

挂载 Provider

// src/app.tsx
import React from 'react';
import 'ray';
import '@/i18n';
import { kit, SmartDeviceModel } from '@ray-js/panel-sdk';
import { NetworkProvider } from '@/context/network';
import { devices } from '@/devices';
 
const { initPanelEnvironment } = kit;
 
interface Props {
  children: React.ReactNode;
}
 
interface State {
  initialized: boolean;
}
 
initPanelEnvironment({ useDefaultOffline: true });
 
export default class App extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = {
      initialized: !!devices?.robot?.initialized,
    };
  }
 
  componentDidMount() {
    SmartDeviceModel.onInitialized(() => {
      /**
       * 这里 setTimeout 是为了保证在 devices.xxx 挂载上去以后再去渲染子组件
       */
      setTimeout(() => {
        this.setState({ initialized: true });
      }, 0);
    });
  }
 
  render() {
    return this.state.initialized ? (
      <NetworkProvider value={devices.robot.network}>
        {this.props.children}
      </NetworkProvider>
    ) : null;
  }
}

使用 Context

// src/pages/home/index.tsx
import React, { useContext } from 'react';
import { View } from '@ray-js/ray';
import { NetworkContext } from '@/context/network';
 
export default function PageAppState() {
  const network = useContext(NetworkContext);
  return (
    <View style={{ flex: 1 }}>
      {Object.keys(network || {}).map((key) => {
        return <View key={key}>{`network.${key}: ${network[key]}`}</View>;
      })}
    </View>
  );
}

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