使用react封装一个web serial api的useSerial自定义hook

在React中，我们可以创建一个名为`useSerial`的自定义hook来封装Web Serial API的功能。这个hook可以帮助我们更简洁地处理设备连接、数据读取和错误处理等繁琐的操作。以下是使用React Hooks（如useState和useEffect）来实现该hook的一个基本示例： ```javascript import { useState, useEffect } from 'react'; // 假设webSerialAPI是一个全局可用的对象，用于访问Web Serial API const webSerialAPI = window.WebSerialPort; // useSerial自定义hook export const useSerial = (serialPortName) => { const [serialPort, setSerialPort] = useState(null); const [data, setData] = useState(''); const [error, setError] = useState(null); // 初始化函数 const initialize = async () => { try { serialPort = await webSerialAPI.getPorts(); if (serialPortName && serialPort.find(port => port.label === serialPortName)) { const selectedPort = serialPort.find(port => port.label === serialPortName); setSerialPort(selectedPort.open({ baudRate: 9600 })); } } catch (e) { setError(e.message); } }; // 数据接收函数 const onData = event => { setData(event.data); }; // 错误处理函数 const handleErrors = err => { setError(err); }; useEffect(() => { if (serialPort) { serialPort.addEventListener('data', onData); return () => serialPort.removeEventListener('data', onData); } return null; }, [serialPort]); // 清理工作 const cleanup = () => { if (serialPort) { serialPort.close(); } }; // 开始初始化 useEffect(() => { initialize(); return cleanup; }, []); // 返回的状态和回调 return { serialPort, data, sendData: (dataToSend) => serialPort.write(dataToSend), error, }; }; // 使用示例 function MyComponent() { const { serialPort, data, error } = useSerial('your_serial_port_name'); // ...在组件里处理serialPort的数据和错误 } ```