react全局状态管理_Reto：在React中使用hooks管理全局状态

在React应用中，如何在多个组件间共享数据并非一件简单的事情，在之前，我们可能需要去学习redux或是mobx，理解什么是reducer 什么是observable 。

于是乎，经过了九个月的探索（期间绕过很多弯路），笔者终于找到了React全局状态管理的正道！这也就是下面将要介绍的新鲜出炉的轮子：reto（reto的意思就是React Store）。

reto的设计初衷很简单直接，让一切变得自然而简单：

使用hooks创建store，就像是在写一个普通的组件。

下面不妨举一个简单的例子 ：

定义Store

每一个Store其实就是一个类似于custom hook的函数。在Store的函数体中，你可以随意使用react hooks，例如useState、useEffect、useRef。

export function FooStore() {
  const [x, setX] = useState(initial)
  return {
    x,
    setX
  }
}

提供Store

通过Provider组件提供一个FooStore ，Provider 组件会维护一个Store的实例。

<Provider of={FooStore}>
  <App/>
</Provider>

获取Store

在组件中通过useStore获取并订阅FooStore的更新。

const App = (props) => {
  const fooStore = useStore(FooStore)
  
  function changeStore() {
    fooStore.setX(fooStore.x + 1)
  }
  return (
    <div>
      <button onClick={changeStore}>Change</button>
      {fooStore.x}
    </div>
  )
}

当点击按钮时，会调用fooStore中的setX函数，从而触发x的更新以及App组件的重渲染，一切都非常简单而自然。

人们常常说，鱼和熊掌不可得兼，但是，reto比起redux，真的是既简单，又灵活，而且性能上由于组件树的拆分可以更快更轻。笔者目前在阿里写前端，在造完这个轮子之后，目前我们小组已经完全迁移到了reto，稳定性已经是经过线上应用的考验了。

当然上面所述的只是一个简单到不能再简单的例子，更多的进阶用法可以点此查看。

最后。。挂上项目链接，欢迎PR/issue/star！

Flexible and efficient React store with hooks.​awmleer.github.io awmleer/reto​github.com