摘要：今天我們就來解讀一下的源碼。比較有意思，將定時(shí)器以方式提供出來，并且提供了方法。實(shí)現(xiàn)方式是，在組件內(nèi)部維護(hù)一個(gè)定時(shí)器，實(shí)現(xiàn)了組件更新銷毀時(shí)的計(jì)時(shí)器更新銷毀操作，可以認(rèn)為這種定時(shí)器的生命周期綁定了組件的生命周期，不用擔(dān)心銷毀和更新的問題。

React PowerPlug 是利用 render props 進(jìn)行更好狀態(tài)管理的工具庫。

React 項(xiàng)目中，一般一個(gè)文件就是一個(gè)類，狀態(tài)最細(xì)粒度就是文件的粒度。然而文件粒度并非狀態(tài)管理最合適的粒度，所以有了 Redux 之類的全局狀態(tài)庫。

同樣，文件粒度也并非狀態(tài)管理的最細(xì)粒度，更細(xì)的粒度或許更合適，因此有了 React PowerPlug。

比如你會(huì)在項(xiàng)目中看到這種眼花繚亂的 state:

class App extends React.PureComponent {
  state = {
    name = 1
    isLoading = false
    isFetchUser = false
    data = {}
    disableInput = false
    validate = false
    monacoInputValue = ""
    value = ""
  }

  render () { /**/ }
}

其實(shí)真正 App 級(jí)別的狀態(tài)并沒有那么多，很多 諸如受控組件 onChange 臨時(shí)保存的無意義 Value 找不到合適的地方存儲(chǔ)。

這時(shí)候可以用 Value 管理局部狀態(tài)：

  {({ value, set, reset }) => (
    <>
      
      Reset to initial
    
  )}

可以看到，這個(gè)問題本質(zhì)上應(yīng)該拆成新的 React 類解決，但這也許會(huì)導(dǎo)致項(xiàng)目結(jié)構(gòu)更混亂，因此 RenderProps 還是必不可少的。
今天我們就來解讀一下 React PowerPlug 的源碼。
2. 精讀
2.1. Value
這是一個(gè)值操作的工具，功能與 Hooks 中 useState 類似，不過多了一個(gè) reset 功能（Hooks 其實(shí)也未嘗不能有，但 Hooks 確實(shí)沒有 Reset）。
用法

  {({ value, set, reset }) => (
    <>
      
      Reset to initial
    
  )}

源碼地址

原料：無

State 只存儲(chǔ)一個(gè)屬性 value，并賦初始值為 initial:

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

方法有 set reset。

set 回調(diào)函數(shù)觸發(fā)后調(diào)用 setState 更新 value。

reset 就是調(diào)用 set 并傳入 this.props.initial 即可。

Toggle 是最直接利用 Value 即可實(shí)現(xiàn)的功能，因此放在 Value 之后說。Toggle 值是 boolean 類型，特別適合配合 Switch 等組件。

既然 Toggle 功能弱于 Value，為什么不用 Value 替代 Toggle 呢？這是個(gè)好問題，如果你不擔(dān)心自己代碼可讀性的話，的確可以永遠(yuǎn)不用 Toggle。

  {({ on, toggle }) => }

源碼地址

原料：Value

核心就是利用 Value 組件，value 重命名為 on，增加了 toggle 方法，繼承 set reset 方法：

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

理所因當(dāng)，將 value 值限定在 boolean 范圍內(nèi)。

與 Toggle 類似，這也是繼承了 Value 就可以實(shí)現(xiàn)的功能，計(jì)數(shù)器。

  {({ count, inc, dec }) => (
    
  )}

源碼地址

原料：Value

依然利用 Value 組件，value 重命名為 count，增加了 inc dec incBy decBy 方法，繼承 set reset 方法。

與 Toggle 類似，Counter 將 value 限定在了數(shù)字，那么比如 inc 就會(huì)這么實(shí)現(xiàn)：

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

這里用到了 Value 組件 set 函數(shù)的多態(tài)用法。一般 set 的參數(shù)是一個(gè)值，但也可以是一個(gè)函數(shù)，回調(diào)是當(dāng)前的值，這里返回一個(gè) +1 的新值。

操作數(shù)組。

  {({ list, pull, push }) => (
    

      
      {list.map({ tag }) => (
         pull(value => value === tag)}>
          {tag}
        
      )}
    
  )}

源碼地址

原料：Value

依然利用 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 函數(shù)由 Mutable 修正為 Immutable，push pull 同理。

存儲(chǔ)數(shù)組對(duì)象，可以添加和刪除元素。類似 ES6 Set。和 List 相比少了許多功能函數(shù)，因此只承擔(dān)添加、刪除元素的簡單功能。

需要注意的是，initial 是數(shù)組，而不是 Set 對(duì)象。

  {({ values, remove, add }) => (
    
      
      {values.map(tag => (
         remove(tag)}>{tag}
      ))}
    
  )}

源碼地址

原料：Value

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

實(shí)現(xiàn)依然很簡單，add remove clear 都利用 Value 提供的 set 進(jìn)行賦值，只要實(shí)現(xiàn)幾個(gè)操作數(shù)組方法即可：

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 方法則直接復(fù)用 hasItem。核心還是利用 Value 的 set 函數(shù)一招通吃，將操作目標(biāo)鎖定為數(shù)組類型罷了。

Map 的實(shí)現(xiàn)與 Set 很像，類似 ES6 的 Map。

與 Set 不同，Map 允許設(shè)置 Key 名。需要注意的是，initial 是對(duì)象，而不是 Map 對(duì)象。