[源码阅读]纯粹极简的react状态管理组件unstated

2018-12-08 admin

简介

unstated是一个极简的状态管理组件

看它的简介:State so simple, it goes without saying

对比

对比redux:

  • 更加灵活(相对的缺点是缺少规则,需要使用者的自觉)

    redux的状态是存放在一棵树内,采用严格的单向流

    unstated的状态是用户自己定义,说白了就是object,可以放在一个组件的内,也可以放在多个组件内

  • 针对React,一致的API

    redux必须编写reduceraction,通过dispatch(action)改变状态,它不限框架

    unstated改变状态的API完全与React一致,使用this.setState,当然和ReactsetState不同, 但是它的底层也是用到了setState去更新视图

  • 功能相对简单

    unstated没有中间件功能,每次状态改变(不管是否相等),都会重新渲染(V2.1.1)

    可以自定义listener,每次更新状态时都会执行。

对比React的自带state:

  • 天生将组件分割为Container(状态管理)Component(视图管理)
  • 灵活配置共享状态或者私有状态
  • 支持promise

快速了解请直接跳到总结

初识

3大板块和几个关键变量

Provider: 注入状态实例,传递map,本质是Context.Provider,可嵌套达成链式传递
Container: 状态管理类,遵循React的API,发布订阅模式,通过new生成状态管理实例
Subscribe: 订阅状态组件,本质是Context.Consumer,接收Provider提供的map,视图渲染组件
map: new Map(),通过类查找当前类创建的状态管理实例

深入

这里引入官方例子

// @flow
import React from 'react';
import { render } from 'react-dom';
import { Provider, Subscribe, Container } from 'unstated';

type CounterState = {
  count: number
};
// 定义一个状态管理类
class CounterContainer extends Container<CounterState> {
  state = {
    count: 0
  };

  increment() {
    this.setState({ count: this.state.count + 1 });
  }

  decrement() {
    this.setState({ count: this.state.count - 1 });
  }
}
// 渲染视图组件(Context.Consumer的模式)
function Counter() {
  return (
    <Subscribe to={[CounterContainer]}>
      {counter => (
        <div>
          <button onClick={() => counter.decrement()}>-</button>
          <span>{counter.state.count}</span>
          <button onClick={() => counter.increment()}>+</button>
        </div>
      )}
    </Subscribe>
  );
}

render(
  <Provider>
    <Counter />
  </Provider>,
  document.getElementById('root')
);

这里Counter是我们自定义的视图组件,首先使用<Provider>包裹,接着在Counter内部,调用<Subscribe>组件, 传递一个数组给props.to,这个数组内存放了Counter组件需要使用的状态管理类(此处也可传递状态管理实例)。

Provider

export function Provider(props: ProviderProps) {
  return (
    <StateContext.Consumer>
      {parentMap => {
        let childMap = new Map(parentMap);
        // 外部注入的状态管理实例
        if (props.inject) {
          props.inject.forEach(instance => {
            childMap.set(instance.constructor, instance);
          });
        }

        // 负责将childMap传递,初始为null
        return (
          <StateContext.Provider value={childMap}>
            {props.children}
          </StateContext.Provider>
        );
      }}
    </StateContext.Consumer>
  );
}

这里的模式是

<Consumer>
  ()=>{
    /* ... */
    return <Provider>{props.children}<Provider />
  }
</Consumer>  

有3个注意点:

  1. 外层嵌套<Consumer>可以嵌套调用。

    <Provider value={...}>
     /* ... */
     <Provider value={此处继承了上面的value}>
     /* ... */ 
    </Provider>
    
  2. props.inject可以注入现成的状态管理实例,添加到map之中。

  3. 返回值写成props.children

返回值写成props.children的意义

简单一句话概括,这么写可以避免React.Context改变导致子组件的重复渲染。

具体看这里:避免React Context导致的重复渲染

Container

export class Container<State: {}> {
  // 保存状态 默认为{}
  state: State;
  // 保存监听函数,默认为[]
  _listeners: Array<Listener> = [];

  setState(
    updater: $Shape<State> | ((prevState: $Shape<State>) => $Shape<State>),
    callback?: () => void
  ): Promise<void> {
    return Promise.resolve().then(() => {
      let nextState;

      /* 利用Object.assign改变state */

      // 执行listener(promise)
      let promises = this._listeners.map(listener => listener());

      // 所有Promise执行完毕
      return Promise.all(promises).then(() => {
        // 全部listener执行完毕,执行回调
        if (callback) {
          return callback();
        }
      });
    });
  }

  // 增加订阅(这里默认的订阅就是React的setState空值(为了重新渲染),也可以添加自定义监听函数)
  subscribe(fn: Listener) {
    this._listeners.push(fn);
  }

  // 取消订阅
  unsubscribe(fn: Listener) {
    this._listeners = this._listeners.filter(f => f !== fn);
  }
}

Container内部逻辑很简单,改变state,执行监听函数。

其中有一个_listeners,是用于存放监听函数的。

每个状态管理实例存在一个默认监听函数onUpdate, 这个默认的监听函数的作用就是调用React的setState强制视图重新渲染

这里的监听函数内部返回Promise,最后通过Promise.all确保执行完毕,然后执行回调参数

因此setState在外面使用也可以使用then

例如,在官方例子中:

increment() {
    this.setState({ count: this.state.count + 1 },()=>console.log('2'))
    .then(()=>console.log('3') )
    console.log('1') 
  }
  // 执行顺序是 1 -> 2 ->3

2个注意点:

  1. setStateReact API一致,第一个参数传入object或者function,第二个传入回调
  2. 这里通过Promise.resolve().then模拟this.setState的异步执行

关于Promise.resolve和setTimeout的区别

简单的说两者都是异步调用,Promise更快执行。

  • setTimeout(()=>{},0)会放入下一个新的任务队列
  • Promise.resolve().then({})会放入微任务,在调用栈为空时立刻补充调用栈并执行(简单理解为当前任务队列尾部)

更多详细可以看这里提供的2个视频:https://stackoverflow.com/a/38752743

Subscribe

export class Subscribe<Containers: ContainersType> extends React.Component<
  SubscribeProps<Containers>,
  SubscribeState
> {
  state = {};
  // 存放传入的状态组件
  instances: Array<ContainerType> = [];
  unmounted = false;

  componentWillUnmount() {
    this.unmounted = true;
    this._unsubscribe();
  }

  _unsubscribe() {
    this.instances.forEach(container => {
      // container为当前组件的每一个状态管理实例
      // 删除listeners中的this.onUpdate
      container.unsubscribe(this.onUpdate);
    });
  }

  onUpdate: Listener = () => {
    return new Promise(resolve => {
      // 组件未被卸载
      if (!this.unmounted) {
        // 纯粹是为了让React更新组件
        this.setState(DUMMY_STATE, resolve);
      } else {
        // 已经被卸载则直接返回
        resolve();
      }
    });
  };

  /* ... */
}

这里的关键就是instances,用于存放当前组件的状态管理实例

当组件unmount的时候,会unsubscribe当前状态管理实例的默认监听函数,那么如果当前的状态管理实例是共享的,会不会有影响呢?

不会的。往后看可以知道,当state每次更新,都会重新创建新的状态管理实例(因为props.to的值可能会发生变化,例如取消某一个状态管理实例), 而每次创建时,都会先unsubscribesubscribe,确保不会重复添加监听函数。

onUpdate就是创建状态管理组件时默认传递的监听函数,用的是ReactsetState更新一个DUMMY_STATE(空对象{})。

export class Subscribe<Containers: ContainersType> extends React.Component<
  SubscribeProps<Containers>,
  SubscribeState
> {
  /* 上面已讲 */

  _createInstances(
    map: ContainerMapType | null,
    containers: ContainersType
  ): Array<ContainerType> {
    // 首先全部instances解除订阅
    this._unsubscribe();

    // 必须存在map 必须被Provider包裹才会有map
    if (map === null) {
      throw new Error(
        'You must wrap your <Subscribe> components with a <Provider>'
      );
    }

    let safeMap = map;
    // 重新定义当前组件的状态管理组件(根据to传入的数组)
    let instances = containers.map(ContainerItem => {
      let instance;

      // 传入的是Container组件,则使用
      if (
        typeof ContainerItem === 'object' &&
        ContainerItem instanceof Container
      ) {
        instance = ContainerItem;
      } else {
        // 传入的不是Container,可能是其他自定义组件等等(需要用new执行),尝试获取
        instance = safeMap.get(ContainerItem);

        // 不存在则以它为key,value是新的Container组件
        if (!instance) {
          instance = new ContainerItem();
          safeMap.set(ContainerItem, instance);
        }
      }

      // 先解绑再绑定,避免重复订阅
      instance.unsubscribe(this.onUpdate);
      instance.subscribe(this.onUpdate);

      return instance;
    });

    this.instances = instances;
    return instances;
  }

  /* ... */
}

_createInstances内部,如果检查到传入的props.to的值已经是状态管理实例(私有状态组件),那么直接使用即可, 如果传入的是类class(共享状态组件),会尝试通过查询map,不存在的则通过new创建。

export class Subscribe<Containers: ContainersType> extends React.Component<
  SubscribeProps<Containers>,
  SubscribeState
> {

  /* 上面已讲 */

  render() {
    return (
      <StateContext.Consumer>
      /* Provider传递的map */
      {map =>
          // children是函数
          this.props.children.apply(
            null,
            // 传给子函数的参数(传进当前组件的状态管理实例)
            this._createInstances(map, this.props.to)
          )
        }
      </StateContext.Consumer>
    );
  }
}

每一次render都会创建新的状态管理实例

到此,3大板块已经阅读完毕。

总结

  1. 简单易用,与React一致的API,一致的书写模式,让使用者很快上手。

  2. 并没有规定如何管理这些状态管理类,非常灵活。

    我们可以学redux将所有状态放到一个共享状态管理实例内部, 例如通过Providerinject属性注入,

    或者针对每一个组件创建单独的状态管理实例(可共享可独立)(unstated作者推荐),

    一切可以按照自己的想法,但同时也要求使用者自己定义一些规则去约束写法。

  3. 仅仅是管理了状态,每次更新都是一个全新的instance集合,并没有做任何对比,需要我们在视图层自己实现。

  4. 返回值写成props.children意义

  5. 关于Promise.resolve().then({})setTimeout(()=>{},0)区别

导图

unstated.png


源码阅读专栏对一些中小型热门项目进行源码阅读和分析,对其整体做出导图,以便快速了解内部关系及执行顺序。 当前源码(带注释),以及更多源码阅读内容:https://github.com/stonehank/sourcecode-analysis,欢迎fork,求

原文链接:https://segmentfault.com/a/1190000017305209

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-47604.html

文章标题:[源码阅读]纯粹极简的react状态管理组件unstated

相关文章
10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式。CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互。本文分享了10个非常炫酷的CSS3动画案例,希望大家...
2015-11-16
React.js编程思想
JavaScript框架层出不穷,在很多程序员看来,React.js是创建大型、快速的Web应用的最好方式。这一款由Facebook出品的JS框架,无论是在Facebook还是在Instagram中,它的表现都非常出色。 使用React.j...
2015-11-12
css布局的各种FC简单介绍:BFC,IFC,GFC,FFC
什么是FC? Formatting Context,格式化上下文,指页面中一个渲染区域,拥有一套渲染规则,它决定了其子元素如何定位,以及与其他元素的相互关系和作用。 BFC 什么是BFC Block Formatting Context,块...
2018-05-17
从2014年的发展来展望JS的未来将会如何
&lt;font face=&quot;寰�杞�闆呴粦, Arial, sans-serif &quot;&gt;2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; ...
2017-03-13
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
ajax为什么令人惊异?ajax的优缺点
使用Ajax的最大优点,就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变的信息。 Ajax不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。就像DHT...
2015-11-12
HTML5的5个不错的开发工具推荐
HTML5规范终于在今年正式定稿,对于从事多年HTML5开发的人员来说绝对是一个重大新闻。数字天堂董事长,DCloud CEO王安也发表了文章,从开发者和用户两个角度分析了HTML对两个人群的优势。其实,关于HTML5的开发工具,我们以往的...
2015-11-12
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
AJAX的浏览器支持
AJAX 的要点是 XMLHttpRequest 对象。 不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的。 IE 浏览器使用 ActiveXObject,而其他的浏览器使用名为 XMLHttpRequest 的 Jav...
2015-11-12
回到顶部