你再也不用使用 Redux、Mobx、Flux 等狀態管理了

来源:https://www.cnblogs.com/stevexu/archive/2019/05/08/10834457.html
-Advertisement-
Play Games

"Unstated Next" readme 的中文翻譯 前言 這個庫的作者希望使用 React 內置 API ,直接實現狀態管理的功能。看完這個庫的說明後，沒有想到代碼可以這個玩。短短幾行代碼，僅僅使用 React Hooks ，就實現了狀態管理的功能。 看完之後，第一想法就是翻譯成中文，分享給其 ...


Unstated Next readme 的中文翻譯

前言

這個庫的作者希望使用 React 內置 API ,直接實現狀態管理的功能。看完這個庫的說明後，沒有想到代碼可以這個玩。短短幾行代碼，僅僅使用 React Hooks ，就實現了狀態管理的功能。

看完之後，第一想法就是翻譯成中文，分享給其他人。提交 Pull Request 後，庫作者將我的翻譯合併了。同時作者歡迎將 README 翻譯成其他語言，以下是全部翻譯內容，不妥之處歡迎指正或 Pull Request.

Unstated Next

永遠不必再考慮 React 狀態管理了，僅僅 200 位元組的狀態管理解決方案。

  • React Hooks React Hooks 用做你所有的狀態管理。
  • ~200 bytes min+gz.
  • 熟悉的 API 僅僅使用了 React，沒有依賴第三方庫。
  • 最小 API 只需 5 分鐘學習。
  • TypeScript 編寫 推斷代碼更容易，易於編寫 React 代碼。

但是，最重要的問題是：這比 Redux 更好嗎？ 答案可能是。

  • 它更小。 比 Redux 小 40 倍。
  • 它更快。 組件性能問題。
  • 它更容易學習。 你必須已經知道 React Hooks 和 Context 。只需使用它們，它們就會嗨起來。
  • 更容易集成。 一次集成一個組件，並且輕鬆與其他 React 庫集成。
  • 它更容易測試。 測試 reducers 純屬浪費你的時間，這個庫使你更容易測試 React 組件。
  • 它更容易進行類型檢查。 旨在使你的大多數類型可推斷。
  • 它是最小的。 僅僅使用了 React 。

你自己看著辦吧！

查看 Unstated 遷移手冊 →

安裝

npm install --save unstated-next

Example

import React, { useState } from "react"
import { createContainer } from "unstated-next"
import { render } from "react-dom"

function useCounter() {
  let [count, setCount] = useState(0)
  let decrement = () => setCount(count - 1)
  let increment = () => setCount(count + 1)
  return { count, decrement, increment }
}

let Counter = createContainer(useCounter)

function CounterDisplay() {
  let counter = Counter.useContainer()
  return (
    <div>
      <button onClick={counter.decrement}>-</button>
      <span>{counter.count}</span>
      <button onClick={counter.increment}>+</button>
    </div>
  )
}

function App() {
  return (
    <Counter.Provider>
      <CounterDisplay />
      <CounterDisplay />
    </Counter.Provider>
  )
}

render(<App />, document.getElementById("root"))

API

createContainer(useHook)

import { createContainer } from "unstated-next"

function useCustomHook() {
  let [value, setInput] = useState()
  let onChange = e => setValue(e.currentTarget.value)
  return { value, onChange }
}

let Container = createContainer(useCustomHook)
// Container === { Provider, useContainer }

<Container.Provider>

function ParentComponent() {
  return (
    <Container.Provider>
      <ChildComponent />
    </Container.Provider>
  )
}

Container.useContainer()

function ChildComponent() {
  let input = Container.useContainer()
  return <input value={input.value} onChange={input.onChange} />
}

useContainer(Container)

import { useContainer } from "unstated-next"

function ChildComponent() {
  let input = useContainer(Container)
  return <input value={input.value} onChange={input.onChange} />
}

指南

如果你以前從未使用過 React Hooks，我不建議你往下看，請先閱讀 [React 官網的 React Hooks 文檔]（https://reactjs.org/docs/hooks-intro.html）。

首先，使用 React Hooks，你可以創建這樣一個組件：

function CounterDisplay() {
  let [count, setCount] = useState(0)
  let decrement = () => setCount(count - 1)
  let increment = () => setCount(count + 1)
  return (
    <div>
      <button onClick={decrement}>-</button>
      <p>You clicked {count} times</p>
      <button onClick={increment}>+</button>
    </div>
  )
}

然後，如果你想共用組件的邏輯，你可以把它寫在組件外面，自定義一個 hook:

function useCounter() {
  let [count, setCount] = useState(0)
  let decrement = () => setCount(count - 1)
  let increment = () => setCount(count + 1)
  return { count, decrement, increment }
}

function CounterDisplay() {
  let counter = useCounter()
  return (
    <div>
      <button onClick={counter.decrement}>-</button>
      <p>You clicked {counter.count} times</p>
      <button onClick={counter.increment}>+</button>
    </div>
  )
}

但是，除了共用邏輯之外，你還想共用狀態，你會怎麼做呢？

這個時候，context 就發揮了作用：

function useCounter() {
  let [count, setCount] = useState(0)
  let decrement = () => setCount(count - 1)
  let increment = () => setCount(count + 1)
  return { count, decrement, increment }
}

let Counter = createContext(null)

function CounterDisplay() {
  let counter = useContext(Counter)
  return (
    <div>
      <button onClick={counter.decrement}>-</button>
      <p>You clicked {counter.count} times</p>
      <button onClick={counter.increment}>+</button>
    </div>
  )
}

function App() {
  let counter = useCounter()
  return (
    <Counter.Provider value={counter}>
      <CounterDisplay />
      <CounterDisplay />
    </Counter.Provider>
  )
}

這很棒，也很完美，更多人應該編寫這樣的代碼。

但有時我們需要更多的結構和特定的 API 設計才能使其始終保持正確。

通過引入 createContainer() 函數，你可以將自定義 hooks 作為 containers，並且定義明確的 API，防止錯誤使用。

import { createContainer } from "unstated-next"

function useCounter() {
  let [count, setCount] = useState(0)
  let decrement = () => setCount(count - 1)
  let increment = () => setCount(count + 1)
  return { count, decrement, increment }
}

let Counter = createContainer(useCounter)

function CounterDisplay() {
  let counter = Counter.useContainer()
  return (
    <div>
      <button onClick={counter.decrement}>-</button>
      <p>You clicked {counter.count} times</p>
      <button onClick={counter.increment}>+</button>
    </div>
  )
}

function App() {
  return (
    <Counter.Provider>
      <CounterDisplay />
      <CounterDisplay />
    </Counter.Provider>
  )
}

下麵是前後的代碼對比：

- import { createContext, useContext } from "react"
+ import { createContainer } from "unstated-next"

  function useCounter() {
    ...
  }

- let Counter = createContext(null)
+ let Counter = createContainer(useCounter)

  function CounterDisplay() {
-   let counter = useContext(Counter)
+   let counter = Counter.useContainer()
    return (
      <div>
        ...
      </div>
    )
  }

  function App() {
-   let counter = useCounter()
    return (
-     <Counter.Provider value={counter}>
+     <Counter.Provider>
        <CounterDisplay />
        <CounterDisplay />
      </Counter.Provider>
    )
  }

如果你正在使用 TypeScript（我鼓勵你瞭解更多關於它的信息），這也有助於 TypeScript 的內置推斷做得更好。只要你的自定義 hook 類型是完善的，那麼類型都會自動推斷。

提示

提示 #1: 組合 Containers

因為我們只使用了自定義 React hooks，所以可以在其他 hooks 內部組合 containers。

function useCounter() {
  let [count, setCount] = useState(0)
  let decrement = () => setCount(count - 1)
  let increment = () => setCount(count + 1)
  return { count, decrement, increment, setCount }
}

let Counter = createContainer(useCounter)

function useResettableCounter() {
  let counter = Counter.useContainer()
  let reset = () => counter.setCount(0)
  return { ...counter, reset }
}

提示 #2: 保持 Containers 很小

這對於保持 containers 小而集中非常有用。 如果你想在 containers 中對代碼進行邏輯拆分，那麼這一點非常重要。只需將它們移動到自己的 hooks 中，僅保存 containers 的狀態即可。

function useCount() {
  return useState(0)
}

let Count = createContainer(useCount)

function useCounter() {
  let [count, setCount] = Count.useContainer()
  let decrement = () => setCount(count - 1)
  let increment = () => setCount(count + 1)
  let reset = () => setCount(0)
  return { count, decrement, increment, reset }
}

提示 #3: 優化組件

unstated-next 無需優化。所有你要做的優化，都是標準的 React 優化。

1) 通過拆分組件來優化耗時的子樹

優化前:

function CounterDisplay() {
  let counter = Counter.useContainer()
  return (
    <div>
      <button onClick={counter.decrement}>-</button>
      <p>You clicked {counter.count} times</p>
      <button onClick={counter.increment}>+</button>
      <div>
        <div>
          <div>
            <div>SUPER EXPENSIVE RENDERING STUFF</div>
          </div>
        </div>
      </div>
    </div>
  )
}

優化後:

function ExpensiveComponent() {
  return (
    <div>
      <div>
        <div>
          <div>SUPER EXPENSIVE RENDERING STUFF</div>
        </div>
      </div>
    </div>
  )
}

function CounterDisplay() {
  let counter = Counter.useContainer()
  return (
    <div>
      <button onClick={counter.decrement}>-</button>
      <p>You clicked {counter.count} times</p>
      <button onClick={counter.increment}>+</button>
      <ExpensiveComponent />
    </div>
  )
}

2) 使用 useMemo() 優化耗時的操作

優化前:

function CounterDisplay(props) {
  let counter = Counter.useContainer()

  // 每次 `counter` 改變都要重新計算這個值，非常耗時
  let expensiveValue = expensiveComputation(props.input)

  return (
    <div>
      <button onClick={counter.decrement}>-</button>
      <p>You clicked {counter.count} times</p>
      <button onClick={counter.increment}>+</button>
    </div>
  )
}

優化後:

function CounterDisplay(props) {
  let counter = Counter.useContainer()

  // 僅在輸入更改時重新計算這個值
  let expensiveValue = useMemo(() => {
    return expensiveComputation(props.input)
  }, [props.input])

  return (
    <div>
      <button onClick={counter.decrement}>-</button>
      <p>You clicked {counter.count} times</p>
      <button onClick={counter.increment}>+</button>
    </div>
  )
}

3) 使用 React.memo()、useCallback() 減少重新渲染次數

優化前:

function useCounter() {
  let [count, setCount] = useState(0)
  let decrement = () => setCount(count - 1)
  let increment = () => setCount(count + 1)
  return { count, decrement, increment }
}

let Counter = createContainer(useCounter)

function CounterDisplay(props) {
  let counter = Counter.useContainer()
  return (
    <div>
      <button onClick={counter.decrement}>-</button>
      <p>You clicked {counter.count} times</p>
      <button onClick={counter.increment}>+</button>
    </div>
  )
}

優化後:

function useCounter() {
  let [count, setCount] = useState(0)
  let decrement = useCallback(() => setCount(count - 1), [count])
  let increment = useCallback(() => setCount(count + 1), [count])
  return { count, decrement, increment }
}

let Counter = createContainer(useCounter)

let CounterDisplayInner = React.memo(props => {
  return (
    <div>
      <button onClick={props.decrement}>-</button>
      <p>You clicked {props.count} times</p>
      <button onClick={props.increment}>+</button>
    </div>
  )
})

function CounterDisplay(props) {
  let counter = Counter.useContainer()
  return <CounterDisplayInner {...counter} />
}

與 Unstated 的關係

我認為這個庫是 Unstated 精神的繼承者。因為我相信 React 在狀態管理方面已經非常出色，唯一缺少的就是輕鬆共用狀態和邏輯，所以我創建了 Unstated 。我創建的 Unstated 是 React 共用狀態和邏輯的 最小 解決方案。

然而，使用 Hooks，React 在共用狀態和邏輯方面可以做得更好。我甚至認為 Unstated 成為了不必要的抽象。

但是，我認為很多開發人員都在努力瞭解如何使用 React Hooks 共用狀態和邏輯，從而實現應用程式共用狀態。這可能只是文檔和社區動力的問題，但我認為一個新的 API 可以彌補這種心理差距。

這個 API 就是 Unstated Next。 它不是 React 中共用狀態和邏輯的最小 API，而是用於理解如何在 React 中共用狀態和邏輯的最小 API。

我一直給 React 站隊。我希望 React 可以贏。 我希望社區放棄像 Redux 這樣的狀態管理庫，並找到使用 React 內置工具鏈的更好方法。

如果你不想使用 Unstated，你只想使用 React 本身，我非常鼓勵你這麼做。 寫關於它的博客文章！ 討論它！ 在社區中傳播你的知識。

從 unstated 遷移

我故意將其發佈為單獨的包，因為它是對原有 API 的完全重寫。 這樣，你可以逐步安裝和遷移。

請向我提供有關該遷移過程的反饋，因為在接下來的幾個月里，我希望得到這些反饋並做以下兩件事：

  • 確保 unstated-next 滿足 unstated 使用者的所有需求。
  • 確保 unstated 使用者的代碼可以完整地遷移到 unstated-next。

我可以將 API 新增到兩者的任意一個倉庫中，從而使開發人員工作得更輕鬆。 對於 unstated-next，我將保證新增的 API 儘可能小，同時，我也會儘量保持庫很小。

未來，我可能會將 unstated-next 合併為 unstated 的主要版本。 unstated-next 仍然存在，這樣你就可以安裝 unstated@2 和 unstated-next。 當你完成遷移後，你可以更新到 unstated@3 ，同時刪除 unstated-next（確保更新你所有的引入，這應該只是一個查找和替換的過程）。

儘管這是一個重大的 API 更改，我希望你儘可能輕鬆地完成此遷移。我正在使用最新的 React Hooks API ，為你進行優化，而不是使用原有的 Unstated.Container 代碼。請隨意提供有關如何做得更好的反饋。

首發 https://nusr.github.io/


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • iOS - iPhone屏幕適配/啟動圖適配/APP圖標適配(iPhone最全尺寸包含iPhoneX/XR/XS/XS Max等)
    趁iPhone新品還沒有發佈,先整理一下屏幕適配、啟動圖適配、APP圖標適配的筆記,方便以後查閱: 註:部分圖片來源於網路 違刪; (一)iPhone屏幕適配: (1)屏幕解析度: ①設計尺寸規範(表格): ②設計尺寸規範(圖文): ③開發尺寸易理解: (二)iPhone劉海屏/非劉海屏PT尺寸簡要 ...
  • Android View篇之自定義驗證碼輸入框
    首先，我們來看看實現的是怎麼樣的效果： 如果我們拿到這樣的UI，想到的佈局應該是用4個 包在橫向的 裡面，但今天要講的View，所以我們決定用一個自定義的 畫出來。 學到什麼？ 基本理解畫布概念 畫布的狀態、平移 佈局測量 畫圖片 功能需求 高亮當前輸入框 輸入滿4個數字自動調用方法 思路 完全重畫 ...
  • 驍龍855,麒麟980,A12,Exynos 9820處理器參數對比分析
    驍龍855基於7nm工藝製程打造，採用了最先進的基於ARM Cortex技術打造的Kryo 485 CPU（三叢集架構：1+3+4），與前代旗艦平臺相比能夠帶來最高達45%的性能提升。集成全新的Adreno 640 GPU，能夠帶來高達20%的圖形渲染速度提升（與Adreno 630對比）。 麒麟9 ...
  • D3.js(v3)+react 製作 一個帶坐標與比例尺的散點圖 (V3版本)
    上一章做了柱形圖，https://www.cnblogs.com/littleSpill/p/10835041.html 這一章做散點圖。 散點圖(Scatter Chart),通常是一橫一豎兩個坐標軸，數據是一組二維坐標，分別對應兩個坐標軸，與坐標軸對應的地方打上點。由此可以猜到，需要的元素包括c ...
  • ES6簡單初識
    ES常用命令介紹 函數的Rest參數和擴展 Promise使用 Module.exports和ES6 import/export的使用 promise使用 promise 為瞭解決callback嵌套,其實就是new一個promise對象 裡面有一個回調方法, 對應參數為正確和錯誤參數 邏輯判斷以後 ...
  • IP地址、功能變數名稱、DNS、URL圖解
    ...
  • D3.js(v3)+react 製作 一個帶坐標與比例尺的柱形圖 (V3版本)
    現在用D3.js + react做一個帶坐標軸和比例尺的柱形圖。我已經儘力把代碼全部註釋上了，最後我也會把完整柱形圖代碼奉上。如果還有疑惑的，可以去翻看一下我之前介紹的方法，以下方法都有介紹到。 還有數據都是自己定義的假數據，大家參考一下製作方法即可。 首先定義柱形圖的數據、繪圖區域的寬高、和上下左 ...
  • CSS-寬度自適應和瀏覽器相容筆記
    自適應 寬度自適應：網頁元素根據視窗或子元素自動調整寬度 適用百分比進行設置，例如：100% 鋪滿；50% 占據一般寬度 塊元素如果不設置寬度，預設為100% 自適應中可以設置最大或者最小寬度和高度 例如：min-height：300px；最小高度為300px； 但是在IE6瀏覽器中不識別 min- ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類