38、React开发：Hookstate、React Router与Fooderator应用搭建

React开发：Hookstate、React Router与Fooderator应用搭建

1. React Hooks与Hookstate库

1.1 React Hooks特性

React Hooks不会阻塞浏览器更新屏幕，因此仅使用Hooks编写的React应用通常比不使用的应用性能更好、响应更迅速。不过，Hook函数是被调度执行的，这意味着它们可能不会总是在你期望的时间执行，但大多数情况下，应用仍会按预期工作。

1.2 全局状态管理问题

在之前的应用中，状态管理方式有些特别。使用 state.ts 文件中的 createState() 函数返回包含所有状态及修改状态函数的对象，这是一种管理全局状态的方式。而新的React开发者常采用的方式是将状态放在所有组件的父组件中，再通过属性传递给子组件，即“属性钻取”。这种方式在小型应用中可行，但在大型应用中会变得混乱。

1.3 Hookstate库介绍

Hookstate是一个基于React状态钩子的状态管理库，官网对它的描述是“最直接、可扩展且极快的状态管理库”，可看作是React useState 钩子的增强版。它基于钩子，主要用于函数式React组件，但也可用于类组件甚至非React代码。
- 创建全局状态 ：

import { createState } from "@hookstate/core";
const gs = cre