第十节 React基础与实践

一、React 简介与特性

1. React 特点：声明式、组件式、跨平台编写

2. React 哲学：

• React是用JavaScript构建 快速响应 的 大型Web应用程序 的首选方式之一。它在 Facebook 和Instagram上表现优秀。
• 等待资源加载时间 和 大部分情况下浏览器单线程执行 是影响web性能的两大主要原因。

3. 优点：

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

二、React 基础

React开发 web应用：

• 架构：打包配置:JSX -> babel -> J.S 加载优化和错误降级。
• UI：可复用UI->组件->页面。可复用逻辑抽离成hook。
• 路由：React R.o.uter向应用中快速地添加视图和数据流，保持页面与URL间的同步。
• 状态：多页面多组件共享信息 redux & context

（一）组件

1. Class 组件：

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

2. 函数式组件

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

函数式 相较于 Class 优点：

• 代码量骤减，组件干净清爽。
• 没有复杂的生命周期。
• 支持自定义hook，逻辑复用方便。

Hook 规则 & 原理

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

三、划分组件

1. 如何划分组件？_ Layout：

• Navbar
• Main Content
• Footer
• Floating Button

2. 如何划分组件？_ Page：

• Banner
• CardGroup
• Slider Group
• Help Docs
• Footer Banner

3. 如何划分组件？_Component：

• BlockHeader：tag , title
• BlockWrapper：backgroundType ， animate?: boolean , theme?: "dark" | "light"
• SlideButton：onClick(direction, index) , icon?: ReactNode , animate?: boolean
• AnimationWrapper：animationName?: string , animationDuration?: number
• SizeText：通过className 控制；封装成组件；安装主题包

4. 父子组件通信:cloneElement , forwardRef

5. 组建信息共享:useContext , useReducer vsRedux

6. 性能优化: useCallback, useMemo, momo

7. 组件挂载位置_冒泡

• 一个从portal 内部触发的事件会一直冒泡至包含Reac树的祖先,即便这些元素并不是DOM树中的祖先。

8. 自定义useRequest实现逻辑复用