响应式系统与 React|青训营笔记

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

课堂重点知识

1. React的历史与应用
2. React的设计思路
3. React（hooks）的写法
4. React的实现
5. React状态管理库
6. 应用级框架科普

知识总结及实例

React的历史与应用

• 应用

1. 前端应用开发
2. 移动原生应用开发
3. 结合Electron，进行桌面应用开发
4. 3D开发

React的设计思路

• 响应式与转换式系统

• 响应式系统

• 前端UI

• 设计思想

1. 组件化

• 组件原则：

1.1 组件是组件的组合/原子组合

1.2 组件内拥有状态，外部不可见

1.3父组件可将状态传入组件内部

• 组件设计：

  组件声明了状态和UI映射

  组件有Props/State两种状态

  组件可由其他组件拼装而成

• 组件代码：

  组件内部拥有私有状态State

  组件接受外部的Props状态提供复用性

  根据当前的State/Props，返回一个UI

2. 状态归属——属于两个节点向上寻找最近的祖宗节点（共享）

2.1 React是单向数据流

2.2 React通过状态管理库来解决状态不合理的问题

2.3 组件状态改变后，更新DOM（diiff算法）

3. 生命周期

React（hooks）的写法

• useState

  用于对状态进行管理，传入一个初始值，返回一个状态和set该状态的函数，用户可以通过调用该函数来实现状态的修改

• useEffect

  传入一个函数和一个数组，数组是状态的数组，称作依赖项，该函数在mount是和依赖项被set时候会执行

  • 有‘副作用’的函数，要传入useEffect来执行。副作用代表除了单纯的计算之外，还要做其他的一些事情，比如网络请求。更新DOM、localStorage存储数据等。

• Hook使用法则

  • 不要在循环、条件或嵌套函数中调用Hook

React的实现

• 虚拟DOM

• Diff算法

React状态管理库

• 核心思想

• 状态管理库
  • redux
  • xstate
  • mobx
  • recoil
• 状态机——当前状态，收到外部事件，迁移到下一个状态
• Modern.js/Reduck

应用级框架科普

相关扩展

React官网

reactjs.org/

Modern.js

modernjs.dev/

Next.js

www.nextjs.cn/

个人总结

学习React的相关概念，掌握虚拟DOM和Diff算法的思想，可以熟练应用React框架。