Recoil 用法及原理浅析

时间:2021-1-8 作者:admin

Recoil 还在实验阶段,不能在生产环境使用。目前文章分析的版本是 0.0.13

特性

  • Hooks 组件的状态管理。不能在类组件里面使用。使用 useHooks 读写状态和订阅组件。

  • 支持 ts。

  • 向后兼容 React,支持 React 并行模式。

    并行模式实际上不是把页面渲染和响应用户交互放在不同的线程去并行执行,而是把渲染任务分成多个时间片,在用户输入的时候可以暂停渲染,达到近似并行的效果。

  • Recoil 的状态和衍生状态都既可以是同步的也可以是异步的,可结合 <suspense>处理异步状态,也可以用 recoil 暴露的 loadable。

    React <suspense>用于代码分片和异步获取数据

    const Clock = React.lazy(() => {
      console.log("start importing Clock");
      return import("./Clock");
    });
    
    <Suspense fallback={<Loading />}>
      { showClock ? <Clock/> : null}
    </Suspense>
    
    
  • 分散(原子化)的状态管理,打平状态树,实现精确的组件更新通知。这样可以避免一处更新,全量渲染。可以对比 Redux 的单一 store ,在 select state 的时候就需要自顶向下逐层读取,一个 state 改变,全部订阅 store 的组件都会收到更新通知。

    Recoil state tree 与组件树正交,正交线就是使用 Recoil state 的组件为点连成的线,减小了 state tree 与组件树的接触面,也就说 state 只会影响订阅它的组件。而且,正交线上的不同的组件属于不同 state 的子节点,state 之间不会相互影响其他 state 订阅的组件。

    Recoil state tree 与组件树正交 [1] :

如何使用

Recoil demo:”shope cart”

实现购物车功能,获取商品列表、添加商品到购物车、提交订单。这里面涉及到在商品列表里面添加到购物车时,购物车组件和商品列表组件要共享购物车状态,订单组件要和购物车组件共享订单状态,还有请求商品列表和提交订单请求涉及到的异步状态的处理。下面是这个 demo 的预览图:

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。