小满zs

useImmer 概述 useImmer 是基于 immer 库实现的一个 React Hook，它让你可以像修改可变数据一样来修改不可变数据。immer 是一个不可变的数...

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

订阅 zustand 的 subscribe，可以订阅一个状态，当状态变化时，会触发回调函数。 订阅一个状态 只要store 的 state 发生变化，就会触发回调函数，另...

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

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

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

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

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

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

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

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

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

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

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

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 样式，但是这样的话与我们的认知是背道而驰的，正常应...

上图是本项目用到的所有技术栈 这个项目分为四端(前端) App(只做安卓不上架) 技术栈ReactNative TS Socket.io scss 桌面端(只做Win) 技...

css modules 什么是 css modules 因为 React 没有Vue的Scoped，但是React又是SPA(单页面应用)，所以需要一种方式来解决css的样...