[TOC] ## useSyncExternalStore 1. 如果你需要去集成已有的非 React 代碼，`useSyncExternalStore` API 是很有用的。 2. 調用向使用瀏覽器的API ## 示例 sub.ts ``` import { useSyncExternalStore } from 'react'; import { counterStore } from '../lib/sub'; function Counter() { const count = useSyncExternalStore( counterStore.subscribe, counterStore.getSnapshot, counterStore.getServerSnapshot ); return ( <div> <p>計數: {count}</p> <button onClick={() => counterStore.setValue(count + 1)}> 增加 </button> </div> ); } export default Counter; ``` demo.txs ``` import { useSyncExternalStore } from 'react'; import { counterStore } from '../lib/sub'; function Counter() { const count = useSyncExternalStore( counterStore.subscribe, counterStore.getSnapshot, counterStore.getServerSnapshot ); return ( <div> <p>計數: {count}</p> <button onClick={() => counterStore.setValue(count + 1)}> 增加 </button> </div> ); } export default Counter; ``` 通常可以把useSyncExternalStore 封裝到 hook 中 如 ``` import { counterStore } from "@/lib/sub"; import { useSyncExternalStore } from "react"; export const useCount = () => { const count = useSyncExternalStore( counterStore.subscribe, counterStore.getSnapshot, counterStore.getServerSnapshot ); return count } ``` 調用 ``` // 子組件 function Counter() { const count = useCount() return ( <div> <p>計數: {count}</p> </div> ); } // 調用 export default function Demo(){ const count = useCount() return <div> <Counter /> <Counter /> <button onClick={() => counterStore.setValue(count + 1)}>button</button> </div> } ```