React + typescript + antd开发前端应用(八)使用全局状态

发布网友发布时间：2024-09-17 08:58

共1个回答

热心网友时间：2024-09-28 02:51

上一篇文章：React + typescript + antd开发前端应用（七）添加菜单点击功能

在处理需要跨多个组件频繁访问的状态时，如果通过在父组件定义状态并通过属性传递给子组件的方式来进行访问，当组件层级较深时，这种方法将变得非常麻烦。同时，从菜单添加点击事件的角度来看，将更新状态的函数传递到子组件和行为组件中的方式并不合理，这给代码的可读性带来了困扰，并且在不同组件间传递的参数较多，容易产生错误。在后续的代码编写中，应根据实际情况，不必过分追求UI组件和行为组件的完全分离。

1、创建AppContext及AppContextProvider

分析之前的代码，tabs组件需要两个状态：一个是记录当前激活的标签页的key，另一个是tabs页签项的数组对象。这两个状态可能在AppTabs组件和AppMenu中需要访问，因此需要创建一个全局对象来保存这两类数据。在src\context目录下创建AppContextProvider.tsx文件，并编辑其内容如下：

2、修改index.tsx

使用刚刚创建的AppContextProvider包裹AppLayout组件，以便在AppLayout及其子组件中使用全局状态对象及函数：

3、修改src\layout\AppLayoutFuncs.ts文件

该文件移除了行为函数，否则状态数据、更新状态的函数都需要作为参数传递到函数中，这会降低代码的可读性：

4、修改src\layout\AppLayout.tsx文件

使用AppContext，添加行为函数：

5、修改src\layout\AppTabsFuncs.ts文件

删除行为函数：

6、修改src\layout\AppTabs.tsx文件

使用全局状态：

7、修改src\layout\AppMenuFuncs.ts文件

8、修改src\layout\AppMenu.tsx文件

完成代码重构后，回到浏览器中进行测试，以验证全局状态是否能够正常工作。

依然建议读者亲自编写这些代码，而不是简单地复制粘贴。在编写代码的过程中，理解每一行代码的意义，这对熟悉React和typescript都有很大帮助。

热心网友时间：2024-09-28 02:52