一文詳解手動實現(xiàn)Recoil狀態(tài)管理基本原理

更新時間：2023年05月08日 10:34:13 作者：Ryun

這篇文章主要為大家介紹了一文詳解手動實現(xiàn)Recoil狀態(tài)管理基本原理實例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

前言

目前，前端流行的狀態(tài)管理有很多，Redux、Mobx、Mobx-lite、Recoil、jotai、xstate等等，根據(jù)多年開發(fā)經(jīng)驗，沒有所謂的最好，重要的是要適合自己的項目和團隊風格，本文主要簡述Recoil的實現(xiàn)原理

我們先看一下Recoil的基本使用

本文只講述 atom、useRecoilValue和useRecoilState的實現(xiàn)
selector有點難度，還沒學明白

import { FC } from 'react';
import { atom, useRecoilState, useRecoilValue } from './recoil';
const textState = atom({
  key: 'textState', // 唯一標識
  default: 'hello', // 默認值
});
const App: FC = () => {
  const value = useRecoilValue(textState);
  const [text, setText] = useRecoilState(textState);
  return (
    <>
      <h1>{value}</h1>
      <p>{text}</p>
      <input type="text" onChange={e => setText(e.target.value)} />
    </>
  );
};
export default App;

atom 包裹狀態(tài)
useRecoilValue(atom)，用于獲取狀態(tài)值
useRecoilState(atom)，類似 useState，返回元組[value, updateValue]

手動實現(xiàn)

先定義好結(jié)構(gòu)

// recoil/index.ts
class Stateful<T>{}
class Atom<T> extends Stateful<T> {}
export function atom<V>(value: { key: string; default: V }) {}
export function useRecoilValue<T>(atom: Atom<T>) {}
export function useRecoilState<T>(atom: Atom<T>): [T, (value: T) => void] {}
export function selector();

從atom開始縷

export class Stateful&lt;T&gt; {
  constructor(projected value: T) {
    this.value = value;
  }
  protected update(value: T) {
    if (this.value !== value) {
       this.value = value;
    }
  }
  // 快照，用于獲取狀態(tài)的value值
  snapshot(): T {
    return this.value;
  }
}
class Atom&lt;T&gt; extends Stateful&lt;T&gt; {
  // 提供一個更新狀態(tài)的方法
  public setState(value: T) {
    super.update(value);
  }
}
// 創(chuàng)建一個狀態(tài)實例
export function atom&lt;V&gt;(value: { key: string; default: V }) {
  return new Atom(value.default);
}

3.atom 有了，里面的value也有了，我們弄一下 useRecoilValue，來顯示一下value

// const textState = atom({ key: 'textState', default: 'hello' });
// const value = useRecoilValue(textState);
export function useRecoilValue<T>(atom: Atom<T>): T {
  return atom.snapshot();
}

4.接下來該來實現(xiàn) useRecoilState，進行狀態(tài)變化

// const [text, setText] = useRecoilState(textState);
// <p>{text}</p>
// <input type="text" onChange={e => setText(e.target.value)} />
export function useRecoilState<T>(atom: Atom<T>): [T, (value: T) => void] {
  // 獲取value
  const value = useRecoilValue(atom);
  // 使用useCallback包裹更新的方法，防止atom不變的情況，無效更新
  return [value, useCallback(value => {
    atom.setState(value)
  }, [atom])]
}
// 我們給update操作增加日志，看看
class Atom<T> extends Stateful<T> {
  public setState(value: T) {
    super.update(value);
    console.log(this.snapshot());
  }
}

我們input輸入后，發(fā)現(xiàn)頁面顯示并沒有更新，但是日志顯示已經(jīng)更新了呀，那么說明react沒有觸發(fā)render

5.如何觸發(fā)render

在react中，useState時，state發(fā)生變化，那么頁面會觸發(fā)render，那么我們就手動觸發(fā)render唄，可以利用 useState 和 useEffect來實現(xiàn)
我們的text是通過 useRecoilValue 獲取到的，那么我們修改useRecoilState方法
這里可以使用一個小技巧，{} !== {}，引用地址不同

export function useRecoilValue<T>(atom: Atom<T>): T {
  // {} !== {}
  const [, updateState] = useState({});
  useEffect(() => {
    updateState({});
  }, [atom]);
  return atom.snapshot();
}

還是不行，因為我們需要在update操作后，觸發(fā)更新才有效，也就是說，我們要實現(xiàn)在update后，再執(zhí)行 updateState({})，沒辦法直接加到update方法里，因為會報錯，hooks不能用在動作方法中 Hooks can only be called inside of the body of a function component.

6.添加發(fā)布/訂閱模式

在 useRecoilValue時，就開始訂閱
在 useRecoilValue 訂閱，在 update時，觸發(fā)訂閱，
訂閱了，那么就一定有取消訂閱，因此如下：

export function useRecoilValue<T>(atom: Atom<T>): T {
  // {} !== {}
  const [, updateState] = useState({});
  // 因為 {} !== {}，用 useEffect 注冊, 觸發(fā)渲染
  useEffect(() => {
    // 訂閱
    const { dissconnect } = atom.subscribe(() => updateState({}));
    // 卸載時
    return () => dissconnect();
  }, [atom]);
  return atom.snapshot();
}

修改 Stateful

// 取消訂閱
interface Dissconnect {
  dissconnect: () => void;
}
export class Stateful<T> {
  private listeners = new Set<(value: T) => void>();
  // ...
  // 訂閱
  subscribe(callback: (value: T) => void): Dissconnect {
    this.listeners.add(callback);
    return {
      dissconnect: () => {
        this.listeners.delete(callback);
      },
    };
  }
  // 發(fā)布
  private emit() {
    for (const listener of Array.from(this.listeners)) {
      listener(this.snapshot());
    }
  }
  protected update(value: T) {
    if (this.value !== value) {
      this.value = value;
      // ++ 發(fā)布訂閱
      this.emit();
    }
  }
}

刷新頁面，useRecoilValue 和 useRecoilState 已經(jīng) OK了，狀態(tài)更新成功

以上就是一文詳解手動實現(xiàn)Recoil狀態(tài)管理基本原理的詳細內(nèi)容，更多關于Recoil狀態(tài)管理的資料請關注腳本之家其它相關文章！

您可能感興趣的文章:

詳解React項目的服務端渲染改造(koa2+webpack3.11)
本篇文章主要介紹了詳解React項目的服務端渲染改造(koa2+webpack3.11)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-03-03
JS跨域解決方案react配置反向代理
這篇文章主要為大家介紹了JS跨域解決方案react配置反向代理的示例內(nèi)容詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步
2021-11-11
react native 仿微信聊天室實例代碼
這篇文章主要介紹了react native 仿微信聊天室實例代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-09-09
react 不用插件實現(xiàn)數(shù)字滾動的效果示例
這篇文章主要介紹了react 不用插件實現(xiàn)數(shù)字滾動的效果示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-04-04
React?Virtual?DOM前端框架全面分析
這篇文章主要為大家介紹了React?Virtual?DOM前端框架全面分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-05-05
React 全面解析excel文件
這篇文章主要介紹了React 全面解析excel文件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-09-09
深入研究React中setState源碼
這篇文章主要介紹了深入研究React中setState源碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-11-11
詳解如何給React-Router添加路由頁面切換時的過渡動畫
這篇文章主要介紹了詳解如何給React-Router添加路由頁面切換時的過渡動畫，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-04-04
React高階組件使用教程詳解
高階組件就是接受一個組件作為參數(shù)并返回一個新組件（功能增強的組件）的函數(shù)。這里需要注意高階組件是一個函數(shù)，并不是組件，這一點一定要注意，本文給大家分享React 高階組件HOC使用小結(jié)，一起看看吧
2022-12-12
關于React Native報Cannot initialize a parameter of type''NSArra
這篇文章主要介紹了關于React Native報Cannot initialize a parameter of type'NSArray＜id＜RCTBridgeModule＞＞錯誤，本文給大家分享解決方案,需要的朋友可以參考下
2021-05-05