React基础与实践

目录

• React简介与特性
• React基础
• 业务场景案例
• 总结

---

React简介与特性

React是什么？

React是用于构建用户界面的JavaScript库，主要有声明式，组件化，跨平台编写等特点

为什么要使用React？

首先得了解到等待资源加载时间和大部分情况下浏览器单线程执行是影响web 性能的两大主要原因。

等待资源加载会出现以下问题：

• 一次请求太多资源
• 网络请求慢
• 资源加载失败

而浏览器线程执行分为JS执行，浏览器计算样式布局，UI绘制，其中浏览器计算样式布局会容易发生堵塞

而React可以很好的解决这些问题

React更新流程：

• Scheduler（调度器）

  • 维护时间切片
  • 与浏览器任务调度
  • 优先级调度

• Reconciler（协调器）

  • 将JSX转化为Fiber
  • Fiber树对比（双缓存）
  • 确定本次更新的Fiber

• Renderer（渲染器）

  • 渲染器用于管理一棵React树，使其根据底层平台进行不同的调用

React优缺点

优点：

• 快速响应：Fiber
• 组件化：复用性强
• 声明式编程
• 跨平台：只需要改渲染器

缺点：

• 大型应用需要配套学习状态管理、路由工具
• 不适合小型应用，需要用babel处理

---

React基础

React在web中的应用：

• 架构：打包配置：JSX->babel->JS

  加载优化和错误降级

• 路由：React Router向应用中快速地添加视图和数据流，保持页面与URL

  间的同步

• UI：可复用UI→组件→页面

  可复用逻辑抽离成hook

• 状态：多页面多组件共享信息 redux&context

React组件：

• 数据：通过定义state操作视图，Mount时获取数据更新state，Ref保存与视图无直接关系的的值，unMount前清空Ref
• 通信：props父子组件通信，context&redux组件信息共享
• UI：数据决定视图，通过Ref获取到DOM
• 性能：函数使用useCallback，值或计算使用useDemo，组件包裹memo

Class组件：

• 继承+构造函数
• this
• 生命周期
• render方法

函数式组件：

• 没有生命周期
• 借助Hook
• return JSX

Hook规则和管理：

• 只能在最顶层使用Hook，React通过Hook调用顺序判断state对应哪个useState

• 只能在React函数中调用Hook

  • 在React函数组件中或自定义Hook中调用
  • 自定义Hook必须以use开头
  • Hook中的state是完全隔离的

---

总结

这节课老师主要介绍了React有关知识，并讲解了大量案例，比如父组件和子组件互相通信，组件信息共享，性能优化。由于我之前主要是使用vue进行开发，所以对于React比较陌生，课后还得多练习掌握