React教程

订阅 zustand 的 subscribe，可以订阅一个状态，当状态变化时，会触发回调函数。 订阅一个状态 只要store 的 state 发生变化，就会触发回调函数，另外就是这个订阅可以在组件内部

HOC(Higher Order Component) 高阶组件 什么是高阶组件？ 高阶组件就是一个组件，它接受另一个组件作为参数，并返回一个新的组件，（如果你学过Vue的话，跟Vue中的二次封装组件

中间件 zustand 的中间件是用于在状态管理过程中添加额外逻辑的工具。它们可以用于日志记录、性能监控、数据持久化、异步操作等。 自定义编写中间件 我们实现一个简易的日志中间件，了解其中间件的实现原

状态简化 回忆一下我们在使用zustand时，是这样引入状态的(如下),通过解构的方式引入状态，但是这样引入会引发一个问题，例如A组件用到了 hobby.basketball 状态，而B组件 没有用到

状态处理 在上一章我们讲了，Zustand会合并第一层的state，但是如果深层次应该如何处理呢 来吧演示 首先创建一个葫芦娃，葫芦娃有七个娃，每个娃都有自己的状态，我们可以通过updateGourd

Zustand Zustand是德语单词，意思是“状态”。中文空耳 猝死丹特,基本上每一个框架都会有自己的状态管理工具，比如 Vue 的 Vuex，React 的 Redux，Zustand 自然也是

边界处理 边界处理包含了错误处理，ErrorBoundary 404页面等错误处理 404页面处理 404页面指的是当React-router路由匹配不到时，显示的页面，例如我们的路由是/home,/

导航 在React-router V7中，大致有四种导航方式： 使用Link组件 link 使用NavLink组件 navlink 使用编程式导航useNavigate usenavigate 使用r

路由操作 路由的操作是由两个部分组成的: loader action 在平时工作中大部分都是在做增刪查改(CRUD)的操作，所以一个界面的接口过多之后就会使逻辑臃肿复杂，难以维护，所以需要使用路由的高

懒加载 什么是懒加载 懒加载是一种优化技术，用于延迟加载组件，直到需要时才加载。这样可以减少初始加载时间，提高页面性能。 懒加载的实现 通过在路由对象中使用 lazy 属性来实现懒加载。 当切换到 a

参数传递 React-router 一共有三种方式进行参数传递，参数传递指的是在路由跳转时，将参数传递给目标路由。 Query方式 Query的方式就是使用 ? 来传递参数，例如： 跳转方式： 获取参

路由 React-Router V7 的路由种类是非常多的，有嵌套路由 布局路由 索引路由 前缀路由 动态路由，大致上是分为这五种的，下面我们一一介绍 Layout 我们在演示上面几种路由之前，先对界

路由模式 在React RouterV7 中，是拥有不同的路由模式，路由模式的选择将直接影响你的整个项目。React Router 提供了四种核心路由创建函数： createBrowserRouter

React-Router V7 React-router 是 React的路由库，如果你学过Vue，跟Vue的Router很相似。它的作用就是，根据不同的URL，匹配不同的组件，然后进行渲染。这样就可

组件实战 本章是额外新增的，因为之前的知识大家都掌握的差不多了，所以这一章节主要是让大家动手实践，巩固一下前面的知识。 那么你会学到什么？ 如何实现一个Tree组件 递归组件的用法 组件库封装 前端打

原子化 css 什么是原子化 css 原子化 CSS 是一种现代 CSS 开发方法，它将 CSS 样式拆分成最小的、单一功能的类。比如一个类只负责设置颜色，另一个类只负责设置边距。这种方式让样式更容易

css-in-js css-in-js 是将 CSS 代码 跟 JS 代码 混合在一起，通过 JS 来动态的生成 CSS 样式，但是这样的话与我们的认知是背道而驰的，正常应该是 CSS JS HTML

css modules 什么是 css modules 因为 React 没有Vue的Scoped，但是React又是SPA(单页面应用)，所以需要一种方式来解决css的样式冲突问题，也就是把每个组件

Suspense Suspense 是一种异步渲染机制，其核心理念是在组件加载或数据获取过程中，先展示一个占位符（loading state），从而实现更自然流畅的用户界面更新体验。 应用场景 异步组

createPortal 注意这是一个API，不是组件，他的作用是：将一个组件渲染到DOM的任意位置，跟Vue的Teleport组件类似。 用法 参数 入参 children：要渲染的组件 domNo