一文详解手动实现Recoil状态管理基本原理

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;

// 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();

export class Stateful<T> {
  constructor(projected value: T) {
    this.value = value;
  }
  protected update(value: T) {
    if (this.value !== value) {
       this.value = value;
    }
  }
  // 快照，用于获取状态的value值
  snapshot(): T {
    return this.value;
  }
}
class Atom<T> extends Stateful<T> {
  // 提供一个更新状态的方法
  public setState(value: T) {
    super.update(value);
  }
}
// 创建一个状态实例
export function atom<V>(value: { key: string; default: V }) {
  return new Atom(value.default);
}

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

// 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());
  }
}

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

export function useRecoilValue<T>(atom: Atom<T>): T {
  // {} !== {}
  const [, updateState] = useState({});
  // 因为 {} !== {}，用 useEffect 注册, 触发渲染
  useEffect(() => {
    // 订阅
    const { dissconnect } = atom.subscribe(() => updateState({}));
    // 卸载时
    return () => dissconnect();
  }, [atom]);
  return atom.snapshot();
}

// 取消订阅
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);
      },
    };
  }
  // 发布
  private emit() {
    for (const listener of Array.from(this.listeners)) {
      listener(this.snapshot());
    }
  }
  protected update(value: T) {
    if (this.value !== value) {
      this.value = value;
      // ++ 发布订阅
      this.emit();
    }
  }
}