精读《React PowerPlug 源码》

发布时间:2019-08-19 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了精读《React PowerPlug 源码》脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

1. 引言

React PowerPlug利用 render PRops 进行更好状态管理的工具库。

React 项目中,一般一个文件就是一个类,状态最细粒度就是文件的粒度。然而文件粒度并非状态管理最合适的粒度,所以有了 redux 之类的全局状态库。

同样,文件粒度也并非状态管理的最细粒度,更细的粒度或许更合适,因此有了 React PowerPlug。

比如你会在项目中看到这种眼花缭乱的 state:

class App extends React.Purecomponent {
  state = {
    name = 1
    isLoading = false
    isFetchUser = false
    data = {}
    disableinput = false
    validate = false
    monacoInputValue = ''
    value = ''
  }

  render () { /**/ }
}

其实真正 App 级别的状态并没有那么多,很多 诸如受控组件 onChange 临时保存的无意义 Value 找不到合适的地方存储。

这时候可以用 Value 管理局部状态:

<Value initial="React">
  {({ value, set, reset }) => (
    <>
      <Select
        label="Choose one"
        options={["React", "Preact", "Vue"]}
        value={value}
        onChange={set}
      />
      <Button onClick={reset}>Reset to initial</Button>
    </>
  )}
</Value>

可以看到,这个问题本质上应该拆成新的 React 类解决,但这也许会导致项目结构更混乱,因此 RenderProps 还是必不可少的。

今天我们就来解读一下 React PowerPlug 的码。

2. 精读

2.1. Value

这是一个值操作的工具,功能与 Hooks 中 useState 类似,不过多了一个 reset能(Hooks 其实也未尝不能有,但 Hooks 确实没有 Reset)。

用法

<Value initial="React">
  {({ value, set, reset }) => (
    <>
      <Select
        label="Choose one"
        options={["React", "Preact", "Vue"]}
        value={value}
        onChange={set}
      />
      <Button onClick={reset}>Reset to initial</Button>
    </>
  )}
</Value>

源码

State 只存储一个属性 value,并赋初始值为 initial:

export default {
  state = {
    value: this.props.initial
  };
}

方法有 set reset

set 回调函数触发后调用 setState 更新 value

reset 就是调用 set 并传入 this.props.initial 即可。

2.2. Toggle

Toggle 是最直接利用 Value 即可实现的功能,因此放在 Value 之后说。Toggle 值是 boolean 类型,特别适合配合 Switch 等组件。

既然 Toggle 功能弱于 Value,为什么不用 Value 替代 Toggle 呢?这是个好问题,如果你不担心自己代码可读性的话,的确可以永远不用 Toggle。

用法

<Toggle initial={false}>
  {({ on, toggle }) => <Checkbox onClick={toggle} checked={on} />}
</Toggle>

源码

核心就是利用 Value 组件,value 重命名为 on,增加了 toggle 方法,继承 set reset 方法:

export default {
  toggle: () => set(on => !on);
}

理所因当,将 value 值限定在 boolean 范围内。

2.3. Counter

与 Toggle 类似,这也是继承了 Value 就可以实现的功能,计数器。

用法

<Counter initial={0}>
  {({ count, inc, dec }) => (
    <CartItem
      productName="Lorem ipsum"
      unitPrice={19.9}
      count={count}
      onAdd={inc}
      onRemove={dec}
    />
  )}
</Counter>

源码

依然利用 Value 组件,value 重命名为 count,增加了 inc dec incBy decBy 方法,继承 set reset 方法。

与 Toggle 类似,Counter 将 value 限定在了数字,那么比如 inc 就会这么实现:

export default {
  inc: () => set(value => value + 1);
}

这里用到了 Value 组件 set 函数的多态用法。一般 set 的参数是一个值,但也可以是一个函数,回调是当前的值,这里返回一个 +1 的新值。

2.4. List

操作数组

用法

<List initial={['#react', '#babel']}>
  {({ list, pull, push }) => (
    <div>
      <FormInput onSubmit={push} />
      {list.map({ tag }) => (
        <Tag onRemove={() => pull(value => value === tag)}>
          {tag}
        </Tag>
      )}
    </div>
  )}
</List>

源码

依然利用 Value 组件,value 重命名为 list,增加了 First last push pull sort 方法,继承 set reset 方法。

export default {
  list: value,
  first: () => value[0],
  last: () => value[Math.max(0, value.length - 1)],
  set: list => set(list),
  push: (...values) => set(list => [...list, ...values]),
  pull: predicate => set(list => list.filter(complement(predicate))),
  sort: compareFn => set(list => [...list].sort(compareFn)),
  reset
};

为了利用 React Immutable 更新的特性,因此将 sort 函数由 Mutable 修正为 Immutable,push pull 同理。

2.5. Set

存储数组对象,可以添加和删除元素。类似 ES6 Set。和 List 相比少了许多功能函数,因此只承担添加、删除元素的简单功能。

用法

需要注意的是,initial 是数组,而不是 Set 对象。

<Set initial={["react", "babel"]}>
  {({ values, remove, add }) => (
    <TagManager>
      <FormInput onSubmit={add} />
      {values.map(tag => (
        <Tag onRemove={() => remove(tag)}>{tag}</Tag>
      ))}
    </TagManager>
  )}
</Set>

源码

依然利用 Value 组件,value 重命名为 values 且初始值为 [],增加了 add remove clear has 方法,保留 reset 方法。

实现依然很简单,add remove clear 都利用 Value 提供的 set 进行赋值,只要实现几个操作数组方法即可:

const unique = arr => arr.filter((d, i) => arr.indexOf(d) === i);
const hasItem = (arr, item) => arr.indexOf(item) !== -1;
const removeItem = (arr, item) =>
  hasItem(arr, item) ? arr.filter(d => d !== item) : arr;
const addUnique = (arr, item) => (hasItem(arr, item) ? arr : [...arr, item]);

has 方法则直接复用 hasItem。核心还是利用 Value 的 set 函数一招通,将操作目标锁定为数组类型罢了。

2.6. map

Map 的实现与 Set 很像,类似 ES6 的 Map

用法

与 Set 不同,Map 允许设置 Key 名。需要注意的是,initial 是对象,而不是 Map 对象。

<Form initial={{ firstName: "", lastName: "" }}>
  {({ field, values }) => (
    <form
      onSubmit={e => {
        e.preventDefault();
        console.log("Form Submission Data:", values);
      }}
    >
      <input
        type="text"
        placeholder="Your First Name"
        {...field("firstName").bind}
      />
      <input
        type="text"
        placeholder="Your Last Name"
        {...field("lastName").bind}
      />
      <input type="submit" value="All Done!" />
    </form>
  )}
</Form>

源码

依然利用 Value 组件,value 重命名为 values 且初始值为 {},增加了 setValues field 方法,保留 reset 方法。

表单最重要的就是 field 函数,为表单的每一个控件做绑定,同时设置一个表单唯一 key:

export default {
  field: id => {
    const value = values[id];
    const setValue = updater =>
      typeof updater === "function"
        ? set(prev => ({ ...prev, [id]: updater(prev[id]) }))
        : set({ ...values, [id]: updater });

    return {
      value,
      set: setValue,
      bind: {
        value,
        onChange: event => {
          if (isObject(event) && isObject(event.target)) {
            setValue(event.target.value);
          } else {
            setValue(event);
          }
        }
      }
    };
  }
};

可以看到,为表单的每一项绑定的内容与 Field 组件一样,只是 Form 组件的行为是批量的。

2.15. Interval

Interval 比较有意思,将定时器以 JSX 方式提供出来,并且提供了 stop resume 方法。

用法

<Interval delay={1000}>
  {({ start, stop }) => (
    <>
      <div>The time is now {new Date().toLocaleTimeString()}</div>
      <button onClick={() => stop()}>Stop interval</button>
      <button onClick={() => start()}>Start interval</button>
    </>
  )}
</Interval>

源码

提供了 start stop toggle 方法。

实现方式是,在组件内部维护一个 Interval 定时器,实现了组件更新、销毁时的计时器更新、销毁操作,可以认为这种定时器的生命周期绑定了 React 组件的生命周期,不用担心销毁和更新的问题。

具体逻辑就不列举了,利用 setInterval clearInterval 函数基本上就可以了。

2.16. Compose

Compose 也是个有趣的组件,可以将上面提到的任意多个组件组合使用。

用法

<Compose components={[Counter, Toggle]}>
  {(counter, toggle) => (
    <ProductCard
      {...productInfo}
      favorite={toggle.on}
      onFavorite={toggle.toggle}
      count={counter.count}
      onAdd={counter.inc}
      onRemove={counter.dec}
    />
  )}
</Compose>

源码

通过递归渲染出嵌套结构,并将每一层结构输出的值存储到 propsList 中,最后一起传递给组件。这也是为什么每个函数 value 一般都要重命名的原因

精读《Epitath 源码 - renderProps 新用法》 文章中,笔者就介绍了利用 generator 解决高阶组件嵌套的问题。

精读《React Hooks》 文章中,介绍了 react hooks 已经实现了这个特性。

所以当你了解了这三种 "compose" 方法后,就可以在合适的场景使用合适的 compose 方式简化代码。

3. 总结

看完了源码分析,不知道你是更感兴趣使用这个库呢,还是已经跃跃欲试开始造轮子了呢?不论如何,这个库的思想在日常的业务开发中都应该大量实践。

另外 Hooks 版的 PowerPlug 已经 4 个月没有更新了(非官方):react-powerhooks,也许下一个维护者/贡献者 就是你。

讨论地址是:精读《React PowerPlug》 · Issue #129 · dt-fe/weekly

如果你想参与讨论,请点击这里,每周都有新的主题,周末或周一发布。前端精读 - 帮你筛选靠谱的内容。

脚本宝典总结

以上是脚本宝典为你收集整理的精读《React PowerPlug 源码》全部内容,希望文章能够帮你解决精读《React PowerPlug 源码》所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
猜你在找的ES2015(es6)相关文章
全站导航更多
最新ES2015(es6)教程
热门ES2015(es6)教程