原文鏈接:https://blog.logrocket.com/exploring-usesyncexternalstore-react-hook/
原文作者:Abhinav Anshul 翻譯:一川
您可能已經熟悉 React 提供的一組內置 Hook,例如 useState、useEffect、useMemo 等等。其中包括 useSyncExternalStore Hook,它在庫作者中非常常用,但在客戶端 React 項目中很少見到。
在本文中,將探討 useSyncExternalStore Hook,以更好地了解它是什么、它如何工作、為什么有用以及何時應該在前端項目中利用它。
如果您想訂閱外部數據存儲,useSyncExternalStore 可能是完美的 API。大多數時候,開發人員選擇 useEffect Hook。但是,如果您的數據存在于 React 樹之外,則 useSyncExternalStore 可能更合適。
基本的 useSyncExternalStore API 接受三個參數:
useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
useSyncExternalStore 返回訂閱的外部數據的當前快照。
考慮這樣一種情況,外部數據不在React 樹中——換句話說,它存在于你的前端代碼或一般應用程序之外。在這種情況下,可以使用 useSyncExternalStore 訂閱該數據存儲。
為了更好地理解 useSyncExternalStore Hook,讓我們看一個非常簡單的實現??梢詫⑵浞峙浣o一個變量(例如下面示例中的 list ),并根據需要將其呈現給 UI:
import { useSyncExternalStore } from 'react';import externalStore from './externalStore.js';function Home() {const list = useSyncExternalStore(externalStore.subscribe, externalStore.getSnapshot); return ( <> <section> {list.map((itm, index) => ( <div key={index}> <div>{itm?.title}</div> </div> ))} </section> </> );}
如您所見, externalStore 現已訂閱,將獲得對 externalStore 數據執行的任何更改的實時快照。您可以使用 list 進一步映射外部源中的項目并進行實時 UI 渲染。
外部存儲中的任何更改都會立即反映出來,React 將根據快照更改重新渲染 UI。
useSyncExternalStore Hook 是許多利基用例的理想解決方案,例如:
在很多這樣的情況下,這個 Hook 可能比流行的 useEffect Hook 非常有用并且更容易管理。讓我們在下一節中比較這兩個 Hook。
您可以選擇更常用的 useEffect Hook 來實現與上面示例類似的功能:
const [list, setList] = useState([]); useEffect(() => { const fetchData = async () => { try { // assuming externalStore has a fetchData method or it is an async operation const newList = await externalStore.fetchData(); setList(newList); } catch (error) { console.error(error); } }; // calling the async function here fetchData(); }, []);
但是, useEffect Hook 不提供每次狀態更新的當前快照,并且它比 useSyncExternalStore Hook 更容易出錯。此外,它還存在臭名昭著的重新渲染問題。接下來我們簡單回顧一下這個問題。
在處理 useEffect Hook 時,可能會遇到的一個主要問題是渲染順序。瀏覽器完成繪制后,只有 useEffect Hook 會觸發。這種延遲(盡管是故意的)會在管理正確的事件鏈方面帶來意想不到的錯誤和挑戰。
考慮以下示例:
function Counter() { const [count, setCount] = useState(0); useEffect(() => { console.log('count- ', count); // Imagine some asynchronous task here, like fetching data from an API // This could introduce a delay between the state update and the effect running // afterwards. }, [count]); const increment = () => { setCount(count + 1); }; console.log('outside the effect count - ', count); return ( <div> <div>Counter</div> <div>Count: {count}</div> <button onClick={increment}>Increment</button> </div> );}export default Counter;
您可能期望計數器應用程序以簡單的方式運行,其中狀態更新,組件重新渲染,最后運行效果。然而,由于 API 調用的延遲,事情變得有點棘手,并且事件的順序可能不是我們所期望的。
現在考慮一個具有許多此類副作用和不同依賴項數組的應用程序。在這種情況下,以正確的順序跟蹤狀態更新將是一場噩夢。
如果您的數據位于外部并且不依賴于現有的 React API 來處理,那么您可以避免所有這些并使用 useSyncExternalStore Hook 來修復此性能差距。與 useEffect Hook 不同,此 Hook 會立即觸發,不會造成任何延遲。
useSyncExternalStore 還可以防止前面提到的重新渲染問題,只要狀態發生變化,您就可能會遇到 useEffect 問題。有趣的是,使用 useSyncExternalStore 訂閱的狀態不會重新渲染兩次,從而解決了巨大的性能問題。
使用 useSyncExternalStore Hook 時,您可能會覺得您只是訂閱一個狀態并將其分配給一個變量,類似于使用 useState Hook。然而, useSyncExternalStore 不僅僅是簡單地分配狀態。
useState Hook 的一個限制是它被設計為以“每個組件”的方式管理狀態。換句話說,你定義的狀態僅限于它自己的React組件,無法全局訪問。您可以使用回調、全局強制狀態,甚至可以在組件中使用 prop-drilling 狀態,但這可能會減慢您的 React 應用程序的速度。
useSyncExternalStore Hook 通過設置一個全局狀態來防止此問題,您可以從任何 React 組件訂閱該狀態,無論其嵌套有多深。更好的是,如果您正在處理非 React 代碼庫,您只需關心訂閱事件。
useSyncExternalStore 將向您發送可以在任何 React 組件中使用的全局存儲當前狀態的正確快照。
讓我們通過構建一個演示待辦事項應用程序來看看 useSyncExternalStore Hook 在實際項目中有多有用。首先,創建一個用作外部全局狀態的 store.js 文件。稍后我們將為我們的待辦事項訂閱此狀態:
let todos = [];let subscribers = new Set();const store = { getTodos() { // getting all todos return todos; }, // subscribe and unsubscribe from the store using callback subscribe(callback) { subscribers.add(callback); return () => subscribers.delete(callback); },// adding todo to the state addTodo(text) { todos = [ ...todos, { id: new Date().getTime(), text: text, completed: false, }, ]; subscribers.forEach((callback) => { callback(); }); },// toggle for todo completion using id toggleTodo(id) { todos = todos.map((todo) => { return todo.id === id ? { ...todo, completed: !todo.completed } : todo; }); subscribers.forEach((callback) => callback()); },};// exporting the default store stateexport default store;
您的 store 現在已準備好在 React 組件中訂閱。繼續創建一個簡單的 Todo 組件,該組件將通過訂閱您之前創建的商店將待辦事項呈現到 UI:
import { useSyncExternalStore } from "react";import store from "./store.js";function Todo() {// subscribing to the store const todosStore = useSyncExternalStore(store.subscribe, store.getTodos); return ( <div> {todosStore.map((todo, index) => ( <div key={index}> <input type="checkbox" value={todo.completed} onClick={() => store.toggleTodo(todo.id)} /> // toggle based on completion logic {todo.completed ? <div>{todo.text}</div> : todo.text} </div> ))} </div> );}export default Todo;
至此,我們使用 useSyncExternalStore 的迷你演示項目就完成了。結果應如下所示:
圖片
React 提供了很多內置的 Hook,其中一些在開發人員中非常常用。然而,像 useSyncExternalStore 這樣真正有用的 Hook 經常會被掩蓋。
在這篇文章中,您已經了解了此 Hook 有許多出色的使用示例,它們不僅可以改善整體應用程序體驗,還可以防止您在使用 useEffect Hook 時可能遇到的討厭的錯誤。
如果您是 JavaScript 庫作者,可能已經在使用它來獲得使用 useEffect Hook 或 useState Hook 無法實現的性能提升。正如我們在本文中探討的那樣,如果正確使用,useSyncExternalStore Hook 可以為您節省大量的開發時間。
本文鏈接:http://www.www897cc.com/showinfo-26-77690-0.html探索 useSyncExternalStore,一個鮮為人知的 React Hook
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。郵件:2376512515@qq.com
上一篇: 學會使用aiofiles模塊,讓Python文件操作更高效!
下一篇: 手把手教你開發自己的VSCode插件