前言
本文面向对于 React 知识有一定了解的同学，稍微深层次的介绍了下 React 的特性和更新流程。对于最近比较火的 Hook 也有了对比和介绍。并结合了较多具体常见的场景案例对 React 的基础知识进行了巩固介绍。
1.React简介与特性
React特点
- 声明式
- 组件化
- 跨平台编写
React哲学（Thinking In React）
- React是用JavaScript构建快速响应的大型Web应用程序的首选方式之一。它在Facebook和Instagram上表现优秀
- 等待资源加载时间和大部分情况下浏览器单线程执行是影响web性能的两大主要原因
Lazy&Suspense
ErroBoundary
更新流程
- Scheduler（调度器）
- 维护时间切片（类似requestIdleCallback）
- 与浏览器任务调度
- 优先级调度
- Reconciler（协调器）
- 将JSX转化为Fiber
- Fiber树对比（双缓存）
- 确定本次更新的Fiber
- Renderer（渲染器）
- 渲染器用于管理一棵React树，使其根据底层平台进行不同的调用
- Fiber树比较
总结优缺点
-
优点
- 快速响应：Fiber
- 组件化：复用性强
- 声明式编程
- 跨平台：只需修改渲染器
-
缺点
- 大型应用需要配套学习状态管理、路由工具
- 不适合小型应用，需要用babel处理
2.React基础温故知新
用React开发web应用
用React开发web应用-组件
组件
- class组件
- 继承+构造函数
- this
- 生命周期
- render方法
- 函数式组件
- 没有生命周期
- 借助Hook
- return JSX
-
函数式相较于Class的优点
- 代码量骤减，组件干净清爽
- 没有复杂的生命周期
- 支持自定义hook，逻辑复用方便
-
组件和Hook的关系
- 我们将UI拆成多个独立单元，这些单元组合可以构成多种视图展示，这些独立单元就是组件。组件相当于原子
- hook贴近组件内部运行的各种概念逻辑，effect、state、context等。hooks更贴近于电子
Hook 规则&原理
- 只能在最顶层使用Hook
- React怎么知道哪个state对应哪个userState？
- 答案是React靠的是Hook调用的程序
- 只能在React中函数中调用Hook
- 在React函数组件中或自定义Hook中调用
- 自定义Hook必须以use开头
- Hook中的state是完全隔离的
Hook 过期闭包问题
- 在JS中，函数运行的上下文是由定义的位置决定的，当函数的闭包包住了旧的变量值时，就出现了过期闭包问题。
React常见API及作用
React常见Hook及作用
3.业务场景案例
如何划分组件？ Layout
- Navbar
- Main Context
- Footer
- Floating Button
Page
- Banner
- CardGroup
- Slider Group
- Help Docs
- Footer Banner
Component
父组件给子组件通信 案例
- 知道子组件的表现，直接通过props传递即可
- 不知道具体子组件表现呢？props.children
父组件给子组件通信 代码
子组件给父组件通信 案例
- 传递信息比如说对象文本等，通过callback
- 传递方法？父组件需要调用子组件的一些方法？
子组件给父组件通信 代码
组件间共享信息 案例
组件间共享信息 context&reducer
组件间共享信息 代码
组件间共享信息 react-redux
组件间共享信息 react-redux代码
组件性能优化 案例
组件性能优化 代码
组件性能如何优化
组件性能优化代码实现
组件挂载位置 案例
组件挂载位置 代码
组件挂载位置 冒泡
如何进行逻辑复用 useRequest案例
如何进行逻辑复用 useRequest分析
如何进行逻辑复用 userRequest run 代码
4.课程总结
总结
学习资料及工具
引用
- 字节内部课：React基础与实践-字节前端初阶训练营
