38、React开发：Fooderator应用的状态管理与路由设置

React开发：Fooderator应用的状态管理与路由设置

1. React Hooks特性

React Hooks不会阻碍浏览器更新屏幕，所以完全使用Hooks编写的React应用通常比不使用的应用性能更好、响应更及时。不过，和React中的大多数事物一样，Hook函数是被调度执行的，这意味着它们可能不会总是在你预期的时候执行。虽然大多数情况下不会有问题，但偶尔也会带来困扰，尤其是 useEffect 。

第三方库也会提供一些Hook供应用使用，比如在Fooderator应用中会用到的Hookstate库。

2. 状态管理新方案：Hookstate

在之前的两个应用中，状态管理的方式有点特别。每个应用都有一个 state.ts 文件，其中有一个 createState() 函数，该函数返回一个包含所有状态以及修改状态的函数的对象，这是一种管理全局状态的方式。

新的React开发者可能首先会想到将状态放在所有组件的父组件中，然后通过组件树将状态作为属性传递下去，这被称为“属性钻取”。在小型应用中，这种方式可行，但在大型应用中会变得非常混乱。

因此，使用第三方库来管理全局状态是更好的选择。虽然React本身没有开箱即用的全局状态管理机制（现在有Context，但通常不是最佳方案），其中Redux是一个很受欢迎的状态管理库，而这里要介绍的是Hookstate。

Hookstate官网对它的描述是：基于React状态Hook的最直接、可扩展且极其快速的状态管理方案。可以说，它是React的 useS