原子狀態(tài)持久化)
【免費下載鏈接】react-native-mmkv?? The fastest key/value storage for React Native. ~30x faster than AsyncStorage!項目地址https://gitcode.com/gh_mirrors/re/react-native-mmkv點擊查看免費下載導讀Jotai 是 React 生態(tài)中基于原子atom的輕量級狀態(tài)管理庫而 react-native-mmkv 則提供了約 30 倍于 AsyncStorage 的同步鍵值存儲能力。本文基于倉庫中的 docs/WRAPPER_JOTAI.md 官方集成指南講解如何通過 Jotai 官方提供的atomWithStoragecreateJSONStorage工具把 MMKV 無縫接入 Jotai 的原子狀態(tài)體系從而讓每一個 atom 的讀寫自動落盤、跨應用啟動持久化。讀完本文你將掌握完整的atomWithMMKV封裝代碼、其底層 API 調用鏈以及 JSON 序列化、跨進程變更監(jiān)聽等關鍵機制。為什么需要 atomWithMMKVJotai 本身的atom()只負責內存中的狀態(tài)刷新應用后即丟失。要實現(xiàn)持久化Jotai 官方在jotai/utils中提供了atomWithStorage(key, initialValue, storage)——它要求傳入一個符合AsyncStorage 風格接口的storage對象該對象必須實現(xiàn)四個方法方法簽名職責getItem(key: string) string \| null讀取指定 key 的字符串值setItem(key: string, value: string) void寫入字符串值removeItem(key: string) void刪除指定 keysubscribe(key: string, callback) () void訂閱某 key 的變更返回取消訂閱函數(shù)而 MMKV 原生暴露的正是同步的getString/set/remove以及addOnValueChangedListener監(jiān)聽能力二者接口天然契合。因此只需要寫一個薄薄的適配層就能讓 Jotai 用上 MMKV 的高性能同步存儲而無需引入任何第三方橋接庫。第一步安裝依賴在使用本封裝前先確保安裝 react-native-mmkvV4 版本基于 Nitro Modules及其運行時依賴npm install react-native-mmkv react-native-nitro-modules cd ios pod install如果你的項目使用 Exponpx expo install react-native-mmkv react-native-nitro-modules npx expo prebuild同時安裝 Jotainpm install jotai安裝完成后即可創(chuàng)建全局唯一的 MMKV 實例并開始編寫適配層。核心封裝atomWithMMKV倉庫官方指南給出了完整的atomWithMMKV實現(xiàn)它位于全局存儲實例之上通過createJSONStorage把 Jotai 與 MMKV 綁定起來import { atomWithStorage, createJSONStorage } from jotai/utils; import { createMMKV } from react-native-mmkv; const storage createMMKV(); function getItem(key: string): string | null { const value storage.getString(key) return value ? value : null } function setItem(key: string, value: string): void { storage.set(key, value) } function removeItem(key: string): void { storage.remove(key); } function subscribe( key: string, callback: (value: string | null) void ): () void { const listener (changedKey: string) { if (changedKey key) { callback(getItem(key)) } } const { remove } storage.addOnValueChangedListener(listener) return () { remove() } } export const atomWithMMKV T(key: string, initialValue: T) atomWithStorageT( key, initialValue, createJSONStorageT(() ({ getItem, setItem, removeItem, subscribe, })), { getOnInit: true } );這段代碼拆解來看每一層都對應 MMKV 原生 API 的同步能力1. 單例存儲實例const storage createMMKV()創(chuàng)建了默認 IDmmkv.default的存儲實例。查看源碼 createMMKV.ts 可以看到在非測試環(huán)境下它會調用原生工廠創(chuàng)建 C HybridObject并自動掛載內存警告監(jiān)聽addMemoryWarningListener與應用激活時的內容變更檢查addContentChangedListener。官方建議整個應用復用同一個導出實例而不是每次創(chuàng)建// storage.ts import { createMMKV } from react-native-mmkv export const storage createMMKV()如果希望存儲按用戶隔離或加密也可以傳入配置例如export const storage createMMKV({ id: user-${userId}-storage, encryptionKey: hunter2, encryptionType: AES-256, mode: multi-process, })配置項的含義可參見 MMKVFactory.nitro.ts 中的Configuration類型定義id實例 ID默認mmkv.default多實例需使用不同 IDpath存儲根路徑默認位于$(Documents)/mmkv/iOS 上若配置了 App Group 會自動使用共享目錄encryptionKey/encryptionType加密密鑰與算法AES-128默認 /AES-256密鑰長度分別要求 16 字節(jié) / 32 字節(jié)modesingle-process默認或multi-processApp Clip、擴展等跨進程場景readOnly只讀模式set會拋錯compareBeforeSet寫入前先比較值是否相等相等則跳過落盤。2. getItem讀取字符串storage.getString(key)是 MMKV 提供的同步讀取方法接口定義見 MMKV.nitro.ts。當 key 不存在時它返回undefined因此這里通過value ? value : null歸一化為 AsyncStorage 風格的null返回值保證 Jotai 能正確區(qū)分「有值」與「無值」。3. setItem寫入字符串storage.set(key, value)是同步寫入方法可接受boolean | string | number | ArrayBuffer四類值。注意 Jotai 的 storage 接口約定的是字符串真正的類型序列化由createJSONStorage負責見下文。4. removeItem刪除鍵值storage.remove(key)刪除指定 key返回布爾值表示是否刪除成功。這正好滿足 AsyncStorage 風格接口的刪除語義。5. subscribe跨實例變更訂閱Jotai 要求 storage 提供訂閱能力以便多個頁面、多個 tab 甚至多個進程間的狀態(tài)保持同步。封裝中利用了 MMKV 的addOnValueChangedListener(listener)該監(jiān)聽器會在任意key 被set或刪除時回調 key 名稱注意刪除也會觸發(fā)回調見 createMockMMKV.ts 中remove對notifyListeners的調用。因此適配層需要先過濾出自己關心的 key再通過getItem(key)拉取最新值回傳給 Jotai最后返回remove()作為取消訂閱函數(shù)。這套「事件驅動 主動拉取」的訂閱模式與 LISTENERS.md 中描述的值變更監(jiān)聽機制一脈相承——即使存儲被 App 擴展、App Clip 或后臺服務修改應用回到前臺時也會通過checkContentChanged()檢測外部變更并觸發(fā)監(jiān)聽器保證 atom 狀態(tài)不被陳舊數(shù)據(jù)覆蓋。6. getOnInit啟動即同步atomWithStorage的第四個參數(shù){ getOnInit: true }表示 atom 初始化時就從存儲中讀取持久化值而不是等到訂閱回調觸發(fā)這保證了應用啟動后界面能立即呈現(xiàn)上次會話保存的狀態(tài)。使用方式封裝完成后創(chuàng)建持久化 atom 與普通atom()用法幾乎一致只需把atomWithMMKV(key, initialValue)當作atom()的替代品即可const myAtom atomWithMMKV(my-atom-key, value);在組件中使用import { useAtom } from jotai; const myAtom atomWithMMKV(settings.theme, light); function SettingsScreen() { const [theme, setTheme] useAtom(myAtom); // setTheme(dark) 會同步寫入 MMKV并在下次啟動時恢復 }因為 atom 以字符串 key 為維度與 MMKV 鍵一一對應你可以為不同業(yè)務域創(chuàng)建多個持久化 atom例如用戶信息、主題偏好、購物車數(shù)據(jù)等底層存儲實例只有一個但原子狀態(tài)各自獨立落盤。JSON 序列化createJSONStorage 做了什么封裝中所有 getItem/setItem 都以字符串為輸入輸出那么對象類型如{ name: string, age: number }如何持久化答案是createJSONStorage正如原文檔注釋所強調的它會自動對值執(zhí)行JSON.stringify()/JSON.parse()。const userAtom atomWithMMKVUser(user.profile, { name: Marc, age: 21, }); // 寫入時storage.set(user.profile, {name:Marc,age:21}) // 讀取時storage.getString(user.profile) 后再 JSON.parse這意味著你可以直接持久化對象、數(shù)組、字符串、數(shù)字、布爾值等任意可 JSON 序列化的類型MMKV 底層始終存的是 UTF-8 字符串與原生端getString/set的數(shù)據(jù)形態(tài)完全一致與 README.md 中「用JSON.stringify存對象」的官方建議互為印證若值在運行時被外部進程直接以非 JSON 格式寫入JSON.parse可能拋錯——這是所有 JSON 存儲方案的固有約束建議保持 atom 寫入路徑的一致性。底層實現(xiàn)與測試環(huán)境行為從源碼結構看這套適配層在三種環(huán)境下有對應的行為原生iOS / AndroidcreateMMKV()通過 Nitro Modules 創(chuàng)建 C 實現(xiàn)的同步存儲createMMKV.ts讀寫與監(jiān)聽均為同步調用這也是其性能優(yōu)勢的來源Web 端createMMKV的 Web 實現(xiàn)createMMKV.web.ts基于localStorage同樣實現(xiàn)了getString/set/remove/addOnValueChangedListener與getAllKeys等完整接口因此atomWithMMKV無需改動即可在 Web 上運行需注意 Web 端不支持encryptionKey與path會直接拋錯且瀏覽器禁用 localStorage 時數(shù)據(jù)不會持久化測試環(huán)境Jest / VitestcreateMMKV()會自動返回基于內存 Map 的 mock 實例createMockMMKV.tsset/remove同樣會觸發(fā)監(jiān)聽器回調所以上述subscribe邏輯在單元測試中可以完整驗證不需要 mock Jotai 或 MMKV 原生模塊。注意事項與最佳實踐key 命名約定atom 的 key 同時是 MMKV 的存儲鍵建議使用帶命名空間的字符串如settings.theme、user.profile避免不同模塊間 key 沖突初始值語義atomWithStorage的initialValue只在存儲中不存在該 key 時生效一旦寫入過下次啟動以存儲值優(yōu)先getOnInit: true保證這一點不要手動改動存儲通過storage.set(...)直接寫入同名 key 也會觸發(fā)訂閱回調并同步到對應 atom但反過來 atom 變更會覆蓋手動寫入的值應避免兩套寫入路徑同時操作同一 key跨進程共享若 atom 數(shù)據(jù)需要被 App Clip / 擴展讀取應在createMMKV()時配置mode: multi-process并確保 iOS 端設置了 App Group 目錄敏感數(shù)據(jù)加密對登錄態(tài)、token 等敏感 atom可在創(chuàng)建存儲實例時配置encryptionKeyMMKV 會以 AES-128默認或 AES-256 加密落盤文件。小結通過atomWithMMKVJotai 的狀態(tài)管理獲得了 MMKV 同步讀寫的性能底座atom 讀寫零異步開銷、數(shù)據(jù)跨啟動持久化、跨進程變更自動同步且無需任何第三方膠水庫。整個封裝僅需約 40 行代碼核心思路AsyncStorage 風格接口適配也適用于 redux-persist、recoil、zustand persist 等其他狀態(tài)庫的 MMKV 集成是 react-native-mmkv 官方推薦的整合范式之一。更完整的 API 說明可繼續(xù)閱讀 HOOKS.md 與 LISTENERS.md。贊分享【免費下載鏈接】react-native-mmkv?? The fastest key/value storage for React Native. ~30x faster than AsyncStorage!項目地址https://gitcode.com/gh_mirrors/re/react-native-mmkv點擊查看免費下載相關推薦React Native MMKV與Recoil集成原子狀態(tài)持久化的高效實現(xiàn)React Native MMKV與Recoil集成原子狀態(tài)持久化的高效實現(xiàn) React Native MMKV作為最快的鍵值存儲解決方案與Recoil狀態(tài)PhxQueue與Kafka/RabbitMQ對比分析為何選擇微信開源的分布式隊列PhxQueue與Kafka/RabbitMQ對比分析為何選擇微信開源的分布式隊列 在當今分布式系統(tǒng)架構中 分布式消息隊列 已成為微服務架構的核心組件。面對react-native-mmkv 與 Recoil 集成用 atomEffect 實現(xiàn) atom 狀態(tài)持久化react native mmkv 與 Recoil 集成用 atomEffect 實現(xiàn) atom 狀態(tài)持久化 Recoil 的 atom 狀態(tài)默認只存在于內上一篇DistroAV 啟動報錯 NDI 加載失敗怎么辦一份 NDI Runtime 缺失修復實戰(zhàn)指南下一篇D2DX暗黑破壞神2高清補丁入門到進階一次配置找回寬屏、高幀率與清晰畫面創(chuàng)作聲明：本文部分內容由AI輔助生成（AIGC），僅供參考 在 React Native 中集成 Jotai 與 MMKV：用 atomWithMMKV 實現(xiàn)原子狀態(tài)持久化
【免費下載鏈接】react-native-mmkv?? The fastest key/value storage for React Native. ~30x faster than AsyncStorage!項目地址https://gitcode.com/gh_mirrors/re/react-native-mmkv點擊查看免費下載導讀Jotai 是 React 生態(tài)中基于原子atom的輕量級狀態(tài)管理庫而 react-native-mmkv 則提供了約 30 倍于 AsyncStorage 的同步鍵值存儲能力。本文基于倉庫中的 docs/WRAPPER_JOTAI.md 官方集成指南講解如何通過 Jotai 官方提供的atomWithStoragecreateJSONStorage工具把 MMKV 無縫接入 Jotai 的原子狀態(tài)體系從而讓每一個 atom 的讀寫自動落盤、跨應用啟動持久化。讀完本文你將掌握完整的atomWithMMKV封裝代碼、其底層 API 調用鏈以及 JSON 序列化、跨進程變更監(jiān)聽等關鍵機制。為什么需要 atomWithMMKVJotai 本身的atom()只負責內存中的狀態(tài)刷新應用后即丟失。要實現(xiàn)持久化Jotai 官方在jotai/utils中提供了atomWithStorage(key, initialValue, storage)——它要求傳入一個符合AsyncStorage 風格接口的storage對象該對象必須實現(xiàn)四個方法方法簽名職責getItem(key: string) string \| null讀取指定 key 的字符串值setItem(key: string, value: string) void寫入字符串值removeItem(key: string) void刪除指定 keysubscribe(key: string, callback) () void訂閱某 key 的變更返回取消訂閱函數(shù)而 MMKV 原生暴露的正是同步的getString/set/remove以及addOnValueChangedListener監(jiān)聽能力二者接口天然契合。因此只需要寫一個薄薄的適配層就能讓 Jotai 用上 MMKV 的高性能同步存儲而無需引入任何第三方橋接庫。第一步安裝依賴在使用本封裝前先確保安裝 react-native-mmkvV4 版本基于 Nitro Modules及其運行時依賴npm install react-native-mmkv react-native-nitro-modules cd ios pod install如果你的項目使用 Exponpx expo install react-native-mmkv react-native-nitro-modules npx expo prebuild同時安裝 Jotainpm install jotai安裝完成后即可創(chuàng)建全局唯一的 MMKV 實例并開始編寫適配層。核心封裝atomWithMMKV倉庫官方指南給出了完整的atomWithMMKV實現(xiàn)它位于全局存儲實例之上通過createJSONStorage把 Jotai 與 MMKV 綁定起來import { atomWithStorage, createJSONStorage } from jotai/utils; import { createMMKV } from react-native-mmkv; const storage createMMKV(); function getItem(key: string): string | null { const value storage.getString(key) return value ? value : null } function setItem(key: string, value: string): void { storage.set(key, value) } function removeItem(key: string): void { storage.remove(key); } function subscribe( key: string, callback: (value: string | null) void ): () void { const listener (changedKey: string) { if (changedKey key) { callback(getItem(key)) } } const { remove } storage.addOnValueChangedListener(listener) return () { remove() } } export const atomWithMMKV T(key: string, initialValue: T) atomWithStorageT( key, initialValue, createJSONStorageT(() ({ getItem, setItem, removeItem, subscribe, })), { getOnInit: true } );這段代碼拆解來看每一層都對應 MMKV 原生 API 的同步能力1. 單例存儲實例const storage createMMKV()創(chuàng)建了默認 IDmmkv.default的存儲實例。查看源碼 createMMKV.ts 可以看到在非測試環(huán)境下它會調用原生工廠創(chuàng)建 C HybridObject并自動掛載內存警告監(jiān)聽addMemoryWarningListener與應用激活時的內容變更檢查addContentChangedListener。官方建議整個應用復用同一個導出實例而不是每次創(chuàng)建// storage.ts import { createMMKV } from react-native-mmkv export const storage createMMKV()如果希望存儲按用戶隔離或加密也可以傳入配置例如export const storage createMMKV({ id: user-${userId}-storage, encryptionKey: hunter2, encryptionType: AES-256, mode: multi-process, })配置項的含義可參見 MMKVFactory.nitro.ts 中的Configuration類型定義id實例 ID默認mmkv.default多實例需使用不同 IDpath存儲根路徑默認位于$(Documents)/mmkv/iOS 上若配置了 App Group 會自動使用共享目錄encryptionKey/encryptionType加密密鑰與算法AES-128默認 /AES-256密鑰長度分別要求 16 字節(jié) / 32 字節(jié)modesingle-process默認或multi-processApp Clip、擴展等跨進程場景readOnly只讀模式set會拋錯compareBeforeSet寫入前先比較值是否相等相等則跳過落盤。2. getItem讀取字符串storage.getString(key)是 MMKV 提供的同步讀取方法接口定義見 MMKV.nitro.ts。當 key 不存在時它返回undefined因此這里通過value ? value : null歸一化為 AsyncStorage 風格的null返回值保證 Jotai 能正確區(qū)分「有值」與「無值」。3. setItem寫入字符串storage.set(key, value)是同步寫入方法可接受boolean | string | number | ArrayBuffer四類值。注意 Jotai 的 storage 接口約定的是字符串真正的類型序列化由createJSONStorage負責見下文。4. removeItem刪除鍵值storage.remove(key)刪除指定 key返回布爾值表示是否刪除成功。這正好滿足 AsyncStorage 風格接口的刪除語義。5. subscribe跨實例變更訂閱Jotai 要求 storage 提供訂閱能力以便多個頁面、多個 tab 甚至多個進程間的狀態(tài)保持同步。封裝中利用了 MMKV 的addOnValueChangedListener(listener)該監(jiān)聽器會在任意key 被set或刪除時回調 key 名稱注意刪除也會觸發(fā)回調見 createMockMMKV.ts 中remove對notifyListeners的調用。因此適配層需要先過濾出自己關心的 key再通過getItem(key)拉取最新值回傳給 Jotai最后返回remove()作為取消訂閱函數(shù)。這套「事件驅動 主動拉取」的訂閱模式與 LISTENERS.md 中描述的值變更監(jiān)聽機制一脈相承——即使存儲被 App 擴展、App Clip 或后臺服務修改應用回到前臺時也會通過checkContentChanged()檢測外部變更并觸發(fā)監(jiān)聽器保證 atom 狀態(tài)不被陳舊數(shù)據(jù)覆蓋。6. getOnInit啟動即同步atomWithStorage的第四個參數(shù){ getOnInit: true }表示 atom 初始化時就從存儲中讀取持久化值而不是等到訂閱回調觸發(fā)這保證了應用啟動后界面能立即呈現(xiàn)上次會話保存的狀態(tài)。使用方式封裝完成后創(chuàng)建持久化 atom 與普通atom()用法幾乎一致只需把atomWithMMKV(key, initialValue)當作atom()的替代品即可const myAtom atomWithMMKV(my-atom-key, value);在組件中使用import { useAtom } from jotai; const myAtom atomWithMMKV(settings.theme, light); function SettingsScreen() { const [theme, setTheme] useAtom(myAtom); // setTheme(dark) 會同步寫入 MMKV并在下次啟動時恢復 }因為 atom 以字符串 key 為維度與 MMKV 鍵一一對應你可以為不同業(yè)務域創(chuàng)建多個持久化 atom例如用戶信息、主題偏好、購物車數(shù)據(jù)等底層存儲實例只有一個但原子狀態(tài)各自獨立落盤。JSON 序列化createJSONStorage 做了什么封裝中所有 getItem/setItem 都以字符串為輸入輸出那么對象類型如{ name: string, age: number }如何持久化答案是createJSONStorage正如原文檔注釋所強調的它會自動對值執(zhí)行JSON.stringify()/JSON.parse()。const userAtom atomWithMMKVUser(user.profile, { name: Marc, age: 21, }); // 寫入時storage.set(user.profile, {name:Marc,age:21}) // 讀取時storage.getString(user.profile) 后再 JSON.parse這意味著你可以直接持久化對象、數(shù)組、字符串、數(shù)字、布爾值等任意可 JSON 序列化的類型MMKV 底層始終存的是 UTF-8 字符串與原生端getString/set的數(shù)據(jù)形態(tài)完全一致與 README.md 中「用JSON.stringify存對象」的官方建議互為印證若值在運行時被外部進程直接以非 JSON 格式寫入JSON.parse可能拋錯——這是所有 JSON 存儲方案的固有約束建議保持 atom 寫入路徑的一致性。底層實現(xiàn)與測試環(huán)境行為從源碼結構看這套適配層在三種環(huán)境下有對應的行為原生iOS / AndroidcreateMMKV()通過 Nitro Modules 創(chuàng)建 C 實現(xiàn)的同步存儲createMMKV.ts讀寫與監(jiān)聽均為同步調用這也是其性能優(yōu)勢的來源Web 端createMMKV的 Web 實現(xiàn)createMMKV.web.ts基于localStorage同樣實現(xiàn)了getString/set/remove/addOnValueChangedListener與getAllKeys等完整接口因此atomWithMMKV無需改動即可在 Web 上運行需注意 Web 端不支持encryptionKey與path會直接拋錯且瀏覽器禁用 localStorage 時數(shù)據(jù)不會持久化測試環(huán)境Jest / VitestcreateMMKV()會自動返回基于內存 Map 的 mock 實例createMockMMKV.tsset/remove同樣會觸發(fā)監(jiān)聽器回調所以上述subscribe邏輯在單元測試中可以完整驗證不需要 mock Jotai 或 MMKV 原生模塊。注意事項與最佳實踐key 命名約定atom 的 key 同時是 MMKV 的存儲鍵建議使用帶命名空間的字符串如settings.theme、user.profile避免不同模塊間 key 沖突初始值語義atomWithStorage的initialValue只在存儲中不存在該 key 時生效一旦寫入過下次啟動以存儲值優(yōu)先getOnInit: true保證這一點不要手動改動存儲通過storage.set(...)直接寫入同名 key 也會觸發(fā)訂閱回調并同步到對應 atom但反過來 atom 變更會覆蓋手動寫入的值應避免兩套寫入路徑同時操作同一 key跨進程共享若 atom 數(shù)據(jù)需要被 App Clip / 擴展讀取應在createMMKV()時配置mode: multi-process并確保 iOS 端設置了 App Group 目錄敏感數(shù)據(jù)加密對登錄態(tài)、token 等敏感 atom可在創(chuàng)建存儲實例時配置encryptionKeyMMKV 會以 AES-128默認或 AES-256 加密落盤文件。小結通過atomWithMMKVJotai 的狀態(tài)管理獲得了 MMKV 同步讀寫的性能底座atom 讀寫零異步開銷、數(shù)據(jù)跨啟動持久化、跨進程變更自動同步且無需任何第三方膠水庫。整個封裝僅需約 40 行代碼核心思路AsyncStorage 風格接口適配也適用于 redux-persist、recoil、zustand persist 等其他狀態(tài)庫的 MMKV 集成是 react-native-mmkv 官方推薦的整合范式之一。更完整的 API 說明可繼續(xù)閱讀 HOOKS.md 與 LISTENERS.md。贊分享【免費下載鏈接】react-native-mmkv?? The fastest key/value storage for React Native. ~30x faster than AsyncStorage!項目地址https://gitcode.com/gh_mirrors/re/react-native-mmkv點擊查看免費下載相關推薦React Native MMKV與Recoil集成原子狀態(tài)持久化的高效實現(xiàn)React Native MMKV與Recoil集成原子狀態(tài)持久化的高效實現(xiàn) React Native MMKV作為最快的鍵值存儲解決方案與Recoil狀態(tài)PhxQueue與Kafka/RabbitMQ對比分析為何選擇微信開源的分布式隊列PhxQueue與Kafka/RabbitMQ對比分析為何選擇微信開源的分布式隊列 在當今分布式系統(tǒng)架構中 分布式消息隊列 已成為微服務架構的核心組件。面對react-native-mmkv 與 Recoil 集成用 atomEffect 實現(xiàn) atom 狀態(tài)持久化react native mmkv 與 Recoil 集成用 atomEffect 實現(xiàn) atom 狀態(tài)持久化 Recoil 的 atom 狀態(tài)默認只存在于內上一篇DistroAV 啟動報錯 NDI 加載失敗怎么辦一份 NDI Runtime 缺失修復實戰(zhàn)指南下一篇D2DX暗黑破壞神2高清補丁入門到進階一次配置找回寬屏、高幀率與清晰畫面創(chuàng)作聲明：本文部分內容由AI輔助生成（AIGC），僅供參考