react | 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第 4 天

课堂笔记

前言

React 是一个用于构建用户界面的库。React 不是一个框架 —— 它的应用甚至不局限于 Web 开发，它可以与其他库一起使用以渲染到特定环境。

React 的主要目标是最大程度地减少开发人员构建 UI 时发生的错误。它通过使用组件——描述部分用户界面的、自包含的逻辑代码段——来实现此目的。这些组件可以组合在一起以创建完整的 UI，React 将许多渲染工作进行抽象化，使编码人员可以专注于 UI 设计。

课堂重点内容

1. React的设计思路
2. React（hooks）的写法
3. React的实现
4. React应用及框架科普

详细知识点介绍

一、响应式系统与转换式系统的区别

响应式系统监听事件对事件变化作出反应而转换式系统对给定输入求解特定输出。 响应式系统类似人类的膝跳反应，当膝盖接收外界的刺激（理解为监听事件），膝盖会发生弹跳（响应），转换式系统类似于编译器，程序员编码完成后，将代码编译为机器能够理解的语言的过程对应这一个输入转对应输出的过程。

二、React响应式编程的特点

1. 状态更新，UI自动更新
2. 前端代码组件化，可复用、可封装
3. 状态之间的互相依赖关系，只需声明即可

三、React组件化

1. 组件是组件的组合/原子组件
2. 组件内拥有状态，外部不可见
3. 父组件可将状态传入组件内部
4. 实现组件化的过程：
   • 组件内部拥有私有状态State
   • 组件接受外部的Props状态提供复用性
   • 根据当前的State/Props，返回一个UI

四、React状态归属问题

1. 状态可归属于两个节点向上寻找最近的祖宗节点
   • 状态变化由父组件传入子组件
   • React是单向数据流
2. 可以将状态抽离到UI外部进行统一管理，但受状态几种管理影响代码复用率低

五、React生命周期

React生命周期参考文章

React的生命周期分为三个阶段，分别是挂载阶段、更新阶段、卸载阶段。

1. 挂载阶段: 当组件实例被创建并插入DOM时

   • constructor()
   • static getDerivedStateFromProps()
   • render()
   • componentDidMount()

2. 更新阶段: 当组件的props或state发生变化时会触发更新

   • static getDerivedStateFromProps()
   • shouldComponentUpdate()
   • render()
   • getSnapshotBeforeUpdate()
   • componentDidUpdate()

3. 卸载阶段: 当组件从DOM中移除时会触发卸载

   • componentWillUnmount()

六、React（hooks）写法

课堂介绍了useState()和useEffect()

1. useState()：为函数组件提供状态和修改状态的方法
   • 导入 useState 函数
   • 调用 useState 函数 并导入状态的初始值
   • 从 useState 函数的放回值中，拿到状态和修改状态的函数
2. useEffect()：为react函数组件提供副作用处理
   • 导入 useEffect 函数
   • 调用 useEffect 函数，并传入回调函数
   • 在回调函数中编写副作用处理（dom操作）
   • 修改数据状态
   • 检测副作用是否生效

七、React的实现

• 虚拟DOM是一个JS对象，通过对象的方式来表示DOM结构，通过事务处理机制，将多次DOM修改的结果一次性更新到页面上，从而有效的减少页面渲染次数，减少修改DOM重绘重排的时间，提高渲染性能。
• React在内存中维护一个跟真实DOM一样的虚拟DOM树，再改动完组件后，会再生成一个新的虚拟DOM，React会将新的虚拟DOM和原来的虚拟DOM进行对比，找出两个DOM树的不同的地方（diff），然后在真实DOM上更新diff，提高渲染速度。

八、react应用及框架

1. next.js
2. modern.js
3. blits

课后个人总结

声明式和指令式的区别

• 指令式编程：告诉机器该如何做，并得到自己想要的结果。

• 声明式编程：告诉机器您想得到什么，让机器自己计算该如何做。

函数副作用

一个函数除了主作用，其他的作用就是副作用。对于 React 组件来说，主作用就是根据数据（state/props）渲染 UI，除此之外都是副作用（比如，手动修改 DOM）