weixin_43883615的博客

经过了前面文章的学习，终于到最后一步了，那就是一个管理页面的构建，包括处理列表请求，搜索、重置和展开/收起等功能。结合之前封装的布局、功能相关组件，在本文只需要按需引入，统一了代码标准，减少重复代码，提高代码的可维护性和可复用性。关注本栏目，会实时更新。

紧接上一篇，本篇主要讲和表格相关的全局hook函数封装。结构分析：（1）这个 useTable 钩子的功能是用于管理表格的高度（2）接受一个可选的 params 对象作为参数，可以包含 id 和 offset 两个属性（3）定义getHeight函数，实时计算表格区域高度，控制滚动区域下一篇讲【示例页面构建教学】。关注本栏目，将实时更新。

在今天的 React 生态系统中，有许多优秀的 React Hooks 库，如 ahooks，react-query等，可以自行查阅。这些库确实非常有用，我也在使用。然而，这个系列的初衷是为了教人入门 React 后台管理系统的开发，从零开始构建并实现常用功能。为了更好地理解和应用 React Hooks，这个系列会列举几个例子来讲，以便大家后续根据自己项目的需求继续封装一些自定义hook，或者使用 ahooks 库来满足项目需求。

本文讲解表单搜索业务组件的封装，包括布局、搜索、重置和展开/收起。主要组件包括按钮组件 SearchButton、表单项组件 SearchItem 和表单盒子组件 SearchIndex。本系列以简单学习为主，后续会通过配置对象数组来生成表单项，而不需要每个表单项都单独编写。下一篇讲【页面常用hook封装 — useSearch搜索封装】。关注本栏目，会实时更新。

下一篇讲【开发页面前准备 — 搜索组件封装】。关注本栏目，会实时更新。

本文主要讲Outlet子路由渲染区域—>结构布局的封装。其中涉及的全局搜索hook函数，后面会单独拎出来讲，这期可先忽略，关注布局即可。下一篇讲【页面开发前准备 – Tabs 标签页组件封装】。关注本栏目，会实时更新。

本文将着重将一下插槽，父子传值，以及ref调用子组件方法等。（1）在react中，插槽又称slot-children,父组件可通过props传递内容给子组件，并在子组件中使用这些内容。（2）另外，函数组件可通过props参数以及useImperativeHandle来实现父子组件间的传值。（3）同时，我们还可使用ref来调用子组件的方法，类似于Vue中的ref。注：vue是通过子组件defineExpose暴露方法，加上父组件使用ref去获取下一篇讲【页面开发前准备—Outlet布局组件封装】

本文将详细介绍页面布局的搭建过程，以及其中涉及的相关功能。主要包括头部、侧边栏和内容区域。我们将讲解其中用到的相关功能：如何注册子路由、监听路由变化、实现侧边栏收缩功能、observer监听器的使用、在头部展示和更新个人信息以及使用MobX进行信息管理、登录、登出和记录路由等相关功能的实现。下一篇讲【开发页面前准备—插槽以及函数组件传值】。关注本栏目，将实时更新。

Mock方案主要有两种，第一种是本地安装mockjs，用于模拟数据。第二种是使用在线接口MOCK平台，无需本地开发，只需将请求根地址指向到模拟地址，即可轻松实现接口模拟，生成演示数据。这样可以快速向客户演示产品的完整功能，而无需开发前端界面和交互效果。在这种情况下，推荐两个在线MOCK平台，分别是FastMock和APIPost。这两个平台都提供了方便的注册和使用体验，可以根据需求进行选择。本篇主要介绍第一种方案，即在本地安装mockjs并使用。了解mockjs的依赖包使用方式。

本章主要讲mobx的使用以及创建登录，用户信息，表格实例下一篇讲【mock方案选择以及真实服务器连接】。关注本栏目，会实时更新！

页面加载时，有时会出现异常错误。为了更好的用户体验，这时候就可以使用Error Boundary来捕捉这些渲染错误下一篇讲【状态管理工具mobx安装以及本项目登录，表格，用户信息状态管理封装使用】。关注本栏目，会实时更新！

本章主要讲路由配置以及使用useRoutes生成路由规则展示路由页面下一篇讲【使用Error Boundary捕捉错误边界】。关注本栏目，会实时更新！

本章主要讲react如何进行多环境配置，使用env-cmd下一篇讲【路由配置以及权限】。请密切关注本栏目，会实时更新内容！

本文简单讲一下用Create-React-App初始化项目，旨在保持整个系列的连贯性。通过实际操作演示，展示如何利用React和React Hook编写一个完整功能的后台系统！接下来的系列文章，将开始后台常用功能的开发。主要内容包括多环境配置、路由配置、Error Boundary的使用、状态管理、mock方案的选择、与真实服务器的连接、页面常用hook的封装、全局公共组件的封装、传值和插槽的使用，以及布局相关的函数组件封装等。并且结合antDesign UI框架，最终构建一个完整功能的示例页面。