脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → Recoil状态管理

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

 更新时间：2023年05月08日 10:34:13   作者：Ryun  
这篇文章主要为大家介绍了一文详解手动实现Recoil状态管理基本原理实例解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

前言

目前，前端流行的状态管理有很多，Redux、Mobx、Mobx-lite、Recoil、jotai、xstate等等，根据多年开发经验，没有所谓的最好，重要的是要适合自己的项目和团队风格，本文主要简述Recoil的实现原理

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

  • 本文只讲述 atom、useRecoilValue和useRecoilState的实现
  • 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 包裹状态
  • useRecoilValue(atom)，用于获取状态值
  • useRecoilState(atom)，类似 useState，返回元组[value, updateValue]

手动实现

  • 先定义好结构
// 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;
    }
  }
  // 快照，用于获取状态的value值
  snapshot(): T {
    return this.value;
  }
}
class Atom&lt;T&gt; extends Stateful&lt;T&gt; {
  // 提供一个更新状态的方法
  public setState(value: T) {
    super.update(value);
  }
}
// 创建一个状态实例
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.接下来该来实现 useRecoilState，进行状态变化

// 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输入后，发现页面显示并没有更新，但是日志显示已经更新了呀，那么说明react没有触发render

5.如何触发render

  • 在react中，useState时，state发生变化，那么页面会触发render，那么我们就手动触发render呗，可以利用 useState 和 useEffect来实现
  • 我们的text是通过 useRecoilValue 获取到的，那么我们修改useRecoilState方法
  • 这里可以使用一个小技巧，{} !== {}，引用地址不同
export function useRecoilValue<T>(atom: Atom<T>): T {
  // {} !== {}
  const [, updateState] = useState({});
  useEffect(() => {
    updateState({});
  }, [atom]);
  return atom.snapshot();
}

还是不行，因为我们需要在update操作后，触发更新才有效，也就是说，我们要实现在update后，再执行 updateState({})，没办法直接加到update方法里，因为会报错，hooks不能用在动作方法中 Hooks can only be called inside of the body of a function component.

6.添加发布/订阅模式

  • 在 useRecoilValue时，就开始订阅
  • 在 useRecoilValue 订阅，在 update时，触发订阅，
  • 订阅了，那么就一定有取消订阅，因此如下：
export function useRecoilValue<T>(atom: Atom<T>): T {
  // {} !== {}
  const [, updateState] = useState({});
  // 因为 {} !== {}，用 useEffect 注册, 触发渲染
  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);
      },
    };
  }
  // 发布
  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();
    }
  }
}

刷新页面，useRecoilValue 和 useRecoilState 已经 OK了，状态更新成功

以上就是一文详解手动实现Recoil状态管理基本原理的详细内容，更多关于Recoil状态管理的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • 记录一次完整的react hooks实践

    记录一次完整的react hooks实践

    这篇文章主要介绍了记录一次完整的react hooks实践，通过一个简单示例，介绍了react hooks，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-03-03
  • React状态管理Redux的使用介绍详解

    React状态管理Redux的使用介绍详解

    redux是redux官方react绑定库，能够使react组件从redux store中读取数据，并且向store分发actions以此来更新数据，这篇文章主要介绍了react-redux的设置,需要的朋友可以参考下
    2022-09-09
  • 浅谈React Component生命周期函数

    浅谈React Component生命周期函数

    React组件有哪些生命周期函数？类组件才有的生命周期函数，分为几个阶段：挂载，更新，卸载，错误处理，本文主要介绍了这个阶段，感兴趣的可以了解一下
    2021-06-06
  • react+typescript中使用echarts的实现步骤

    react+typescript中使用echarts的实现步骤

    本文主要介绍了react+typescript中使用echarts的实现步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • React实现二级联动(左右联动)

    React实现二级联动(左右联动)

    这篇文章主要为大家详细介绍了React实现二级联动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-09-09
  • webpack4 + react 搭建多页面应用示例

    webpack4 + react 搭建多页面应用示例

    这篇文章主要介绍了webpack4 + react 搭建多页面应用示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • React中如何设置自定义滚动条样式

    React中如何设置自定义滚动条样式

    这篇文章主要介绍了React中如何设置自定义滚动条样式问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • React中的生命周期和子组件

    React中的生命周期和子组件

    这篇文章主要介绍了React中的生命周期和子组件，文章围绕主题展开详细的内容介绍，具有一定的参考价值，感兴趣的小伙伴可以参考一下
    2022-08-08
  • React实现倒计时功能组件

    React实现倒计时功能组件

    这篇文章主要为大家详细介绍了如何通过React实现一个倒计时功能组件,文中的示例代码讲解详细,具有一定的学习价值,感兴趣的小伙伴可以了解下
    2023-09-09
  • React css-in-js基础介绍与应用

    React css-in-js基础介绍与应用

    随着React、Vue等支持组件化的MVVM前端框架越来越流行，在js中直接编写css的技术方案也越来越被大家所接受。为什么前端开发者们更青睐于这些css-in-js的方案呢，下面带你了解它
    2022-09-09

最新评论