feat(examples): update useRef types and initial values

- Change `useRef<string>()` to `useRef<string>(null)` in ImagePicker
- Update return types of `useLatestRef` from `MutableRefObject` to `RefObject`
- Adjust `clearTimerRef` parameter type to `RefObject`
- Correct ref types and initial values in Decode and Encode pages
- Ensure consistency with React's ref handling and type safety

Author: nuintun

packages/examples/app/js/components/ImagePicker/index.tsx

@@ -20,7 +20,7 @@ export interface ImageUploadProps {
 
 export default memo(function ImageUpload(props: ImageUploadProps) {
   const { message } = useApp();
-  const urlRef = useRef<string>();
+  const urlRef = useRef<string>(null);
   const { children, preview } = props;
   const [dragging, setDragging] = useState(false);
   const [value, setValue] = useControllableValue<string>(props);

packages/examples/app/js/hooks/useLatestRef.ts

@@ -8,19 +8,19 @@ import React, { useMemo, useRef } from 'react';
  * @function useLatestRef
  * @description 生成自更新 useRef 对象
  */
-export default function useLatestRef<T = undefined>(): React.MutableRefObject<T | undefined>;
+export default function useLatestRef<T = undefined>(): React.RefObject<T | undefined>;
 /**
  * @function useLatestRef
  * @description 生成自更新 useRef 对象
  * @param value 引用值
  */
-export default function useLatestRef<T>(value: T): React.MutableRefObject<T>;
+export default function useLatestRef<T>(value: T): React.RefObject<T>;
 /**
  * @function useLatestRef
  * @description 生成自更新 useRef 对象
  * @param value 引用值
  */
-export default function useLatestRef<T = undefined>(value?: T): React.MutableRefObject<T | undefined> {
+export default function useLatestRef<T = undefined>(value?: T): React.RefObject<T | undefined> {
   const valueRef = useRef(value);
 
   // https://github.com/alibaba/hooks/issues/728

packages/examples/app/js/hooks/useLazyState.ts

@@ -18,7 +18,7 @@ type UseLazyState<S> = [state: S, setLazyState: Dispatch<S>];
  * @description 清理延时器
  * @param timerRef 延时器引用
  */
-function clearTimerRef(timerRef: React.MutableRefObject<Timeout | null>): void {
+function clearTimerRef(timerRef: React.RefObject<Timeout | null>): void {
   const { current: timer } = timerRef;
 
   if (timer != null) {

packages/examples/app/js/pages/Decode.tsx

@@ -22,7 +22,7 @@ const { Item: FormItem, useForm, useWatch } = Form;
 
 interface OverviewLocateProps {
   state?: DecodeResultMessage;
-  currentRef: React.MutableRefObject<string | undefined>;
+  currentRef: React.RefObject<string | null>;
 }
 
 const OverviewLocate = memo(function OverviewLocate({ state, currentRef }: OverviewLocateProps) {
@@ -57,7 +57,7 @@ interface LocateProps {
   name: string;
   image: ImageBitmap;
   items: DecodedItem[];
-  currentRef: React.MutableRefObject<string | undefined>;
+  currentRef: React.RefObject<string | null>;
   trigger: (loading: boolean, onClick: () => void) => React.ReactNode;
 }
 
@@ -72,9 +72,9 @@ function cloneImageBitmap(image: ImageBitmap): ImageBitmap {
 
 const Locate = memo(function Locate({ uid, name, items, image, trigger, currentRef }: LocateProps) {
   const lockRef = useRef(false);
-  const workerRef = useRef<Worker>();
   const { message: info } = useApp();
-  const prevUidRef = useRef<string>();
+  const workerRef = useRef<Worker>(null);
+  const prevUidRef = useRef<string>(null);
   const [src, setSrc] = useState<string>();
   const [visible, setVisible] = useState(false);
   const [loading, setLoading] = useLazyState(false);
@@ -225,7 +225,7 @@ const Details = memo(function Details({ name, item }: DetailsProps) {
 
 interface ResultProps {
   state?: DecodeResultMessage;
-  currentRef: React.MutableRefObject<string | undefined>;
+  currentRef: React.RefObject<string | null>;
 }
 
 const Result = memo(function Result({ state, currentRef }: ResultProps) {
@@ -307,9 +307,9 @@ interface FormValues {
 
 export default memo(function Encode() {
   const lockRef = useRef(false);
-  const workerRef = useRef<Worker>();
   const [form] = useForm<FormValues>();
-  const currentLocateRef = useRef<string>();
+  const workerRef = useRef<Worker>(null);
+  const currentLocateRef = useRef<string>(null);
   const [loading, setLoading] = useLazyState(false);
   const [state, setState] = useState<DecodeResultMessage>();
 

packages/examples/app/js/pages/Encode.tsx

@@ -44,8 +44,8 @@ const Result = memo(function Result({ value }: ResultProps) {
 
 export default memo(function Encode() {
   const lockRef = useRef(false);
-  const workerRef = useRef<Worker>();
   const [form] = useForm<FormValues>();
+  const workerRef = useRef<Worker>(null);
   const [loading, setLoading] = useLazyState(false);
   const [state, setState] = useState<EncodeResultMessage>();