小满zs

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

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

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

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

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

React 受控组件理解和应用 React 受控组件 受控组件一般是指表单元素，表单的数据由React的 State 管理，更新数据时，需要手动调用setState()方法，更新数据。因为React没