一文詳解手動實現(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<T> {
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<T> extends Stateful<T> {
// 提供一個更新狀態(tài)的方法
public setState(value: T) {
super.update(value);
}
}
// 創(chuàng)建一個狀態(tài)實例
export function atom<V>(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
react 不用插件實現(xiàn)數(shù)字滾動的效果示例
這篇文章主要介紹了react 不用插件實現(xiàn)數(shù)字滾動的效果示例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-04-04
詳解如何給React-Router添加路由頁面切換時的過渡動畫
這篇文章主要介紹了詳解如何給React-Router添加路由頁面切換時的過渡動畫,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
關于React Native報Cannot initialize a parameter of type''NSArra
這篇文章主要介紹了關于React Native報Cannot initialize a parameter of type'NSArray<id<RCTBridgeModule>>錯誤,本文給大家分享解決方案,需要的朋友可以參考下2021-05-05

