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

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, set, reset }) => (
    <>
      
      Reset to initial
    
  )}

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

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

源碼地址

原料：無

State 只存儲一個屬性 value，并賦初始值為 initial:

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

方法有 set reset。

set 回調函數觸發后調用 setState 更新 value。

reset 就是調用 set 并傳入 this.props.initial 即可。

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

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

  {({ on, toggle }) => }

源碼地址

原料：Value

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

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

理所因當，將 value 值限定在 boolean 范圍內。

與 Toggle 類似，這也是繼承了 Value 就可以實現的功能，計數器。

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

源碼地址

原料：Value

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

與 Toggle 類似，Counter 將 value 限定在了數字，那么比如 inc 就會這么實現：

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

這里用到了 Value 組件 set 函數的多態用法。一般 set 的參數是一個值，但也可以是一個函數，回調是當前的值，這里返回一個 +1 的新值。

操作數組。

  {({ 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 函數由 Mutable 修正為 Immutable，push pull 同理。

存儲數組對象，可以添加和刪除元素。類似 ES6 Set。和 List 相比少了許多功能函數，因此只承擔添加、刪除元素的簡單功能。

需要注意的是，initial 是數組，而不是 Set 對象。

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

源碼地址

原料：Value

依然利用 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 函數一招通吃，將操作目標鎖定為數組類型罷了。

Map 的實現與 Set 很像，類似 ES6 的 Map。

與 Set 不同，Map 允許設置 Key 名。需要注意的是，initial 是對象，而不是 Map 對象。