React 基础与实践学习笔记
课程讲师：杨雨涵
一、课程介绍
这堂课程面向已经对 React 有了一定了解的同学，进行了更深层次的知识讲解。先是进一步阐述了 React 的特性以及更新流程，针对当下热门的 Hook 也做了对比与介绍。还借助众多具体常见的业务场景案例，巩固复习 React 的基础知识。接着探讨了 React 的状态管理工具相关内容，说明了其存在的必要性，并指导如何依据不同场景去选择合适的状态管理工具，还亲手实现了一个简易的状态管理工具。同时结合前端发展史讲述了前端路由的整体演变历程，明确路由所起的作用以及演变的重要性，通过分析 React-router 类库源码来了解路由驱动视图变化的原理，并且介绍了在大型复杂应用里结合路由可做的优化，以提升开发与用户体验。最后还提及了微前端、React.lazy&React.Suspense 以及 SSR&SSG 等内容。
二、课程重点内容
（一）React 简介与特性
-
简介：React 是一款由 Facebook 开发的开源前端框架，用于构建用户界面，它通过组件化的方式，将页面拆分成一个个可复用、独立的组件，能高效地开发复杂的前端应用。
-
特性：
- 组件化：方便代码复用与维护，像按钮、导航栏等都可做成组件在不同页面使用。
- 虚拟 DOM：通过对比虚拟 DOM 的变化，高效更新真实 DOM，减少不必要渲染，提升性能。
- 单向数据流：数据从父组件流向子组件，使得数据流向清晰，便于调试和理解应用逻辑。
（二）React 更新流程
React 的更新流程围绕着组件状态改变而展开。当组件的状态（如通过 setState 方法改变）或者属性发生变化时，React 会重新渲染组件。它先构建新的虚拟 DOM 树，然后将新老虚拟 DOM 树进行对比（Diffing 算法），找出差异部分，最后只将有差异的部分更新到真实 DOM 上，以此提高更新效率。
（三）class 组件和类组件（此处可能重复了，推测应该是 class 组件和函数组件对比）
- class 组件：基于 ES6 的类来定义组件，有自己的生命周期方法（如
componentDidMount、componentWillUnmount等），通过this.setState来更新状态。 - 函数组件：以函数形式定义，代码更简洁，在引入 Hook 后，也能拥有类组件类似的状态管理和生命周期相关功能，比如
useState用于状态管理，useEffect用于模拟生命周期等。
（四）hook 规则
- 只能在顶层调用 Hook：不能在循环、条件判断或者嵌套函数中调用 Hook，确保 Hook 的调用顺序在每次渲染时都保持一致，这样 React 才能正确地关联内部状态和副作用等操作。
- 只能在 React 函数组件或者自定义 Hook 中调用：遵循这个规则才能让 Hook 正常发挥作用，实现相应的状态管理和其他功能。
（五）常见 API 讲解
例如 useState 用于创建和更新组件的状态，返回状态值和更新状态的函数；useEffect 用来处理副作用，像发起网络请求、订阅事件等，可设置依赖项来控制执行时机；还有 useContext 可以在组件间共享数据，避免多层组件传递 props 的繁琐等。
（六）业务场景案例
通过各种实际的业务场景案例，展示了 React 组件如何组合、状态如何流转以及如何利用 API 去解决具体问题，帮助更好地理解 React 在实际开发中的应用方式。
（七）什么是状态管理
在 React 应用中，随着组件数量增多、交互变复杂，组件间共享和更新状态会变得棘手。状态管理就是对应用中各个组件的状态进行统一的、有序的管理，确保数据的一致性、可维护性以及高效流转，避免状态混乱带来的各种问题。
（八）React 状态管理简介
React 本身提供了一些基本的状态管理方式，但对于大型项目往往不够用。于是有了像 Redux、MobX 等第三方状态管理工具，它们各有特点和适用场景，能帮助更好地管理应用中的复杂状态。
（九）实现一个简易的状态管理工具
了解其原理，从定义状态、创建修改状态的方法、订阅状态变化的机制等方面入手，自己动手实现一个简单的状态管理工具，加深对状态管理的理解。
（十）Redux 在项目中的实践
Redux 遵循单向数据流，有明确的 action（描述要做的事）、reducer（根据 action 更新状态）等概念，在大型项目中通过它能清晰地梳理业务逻辑，集中管理状态，方便调试和扩展。
（十一）路由的演变
- 前后端路由：早期后端负责路由，根据不同 URL 渲染不同页面并返回给浏览器，后来前端也开始有了路由概念，使得页面可以在前端实现局部更新，无需每次都向服务器请求整个页面，提升了交互体验和页面加载速度。
- SPA & 路由：单页应用（SPA）中，路由起着关键作用，通过改变 URL 来切换不同的视图组件，让用户感觉像在浏览多个页面，而实际只有一个 HTML 页面，通过路由动态展示不同内容。
（十二）react-router 实现原理
react-router 通过监听 URL 的变化，匹配相应的路由规则，然后决定展示哪个组件，以此驱动视图的变化，实现页面的切换和导航功能。
（十三）项目中常见的问题与结合路由的最佳实践
在项目中可能遇到路由嵌套复杂、权限控制与路由结合等问题，需要采用合理的路由配置、利用路由钩子等最佳实践来解决，提升应用的性能和可维护性。
（十四）微前端
将前端应用拆分成多个小型、独立的子应用，每个子应用可以独立开发、部署，然后通过一定的技术手段整合在一起，便于大型团队协作以及应对复杂的业务场景，实现前端应用的灵活扩展和维护。
（十五）React.lazy&React.Suspense
React.lazy 用于懒加载组件，在需要的时候才加载，能减小初始包体积，提升页面加载速度；React.Suspense 可以在组件加载时显示一些占位内容，优化用户等待的体验。
（十六）SSR&SSG
- SSR（服务器端渲染） ：在服务器端生成完整的 HTML 页面后再发送给客户端，利于 SEO 和首屏加载速度，适合内容型网站等。
- SSG（静态网站生成） ：在构建时就生成静态的 HTML 文件，同样对 SEO 友好，适用于内容相对固定、更新不频繁的网站。
三、学习收获与感悟
通过这堂课，对 React 的诸多核心知识有了更系统深入的理解，从基础的特性、组件类型，到状态管理、路由等重要方面都有了新的认识。明白了它们在实际项目中的应用价值以及如何解决常见问题，后续要在实践中进一步运用这些知识，不断提升 React 开发技能和应对复杂项目的能力。
