这是我参与「第五届青训营 」笔记创作活动的第6天。
前言
本节课程主要分为四个方面：
- 1.React 的历史与应用 - 介绍 React 的发展历史以及应用场景。
- 2.React 的设计思路 - 介绍 React 的设计思想，为什么 React 要设计成这样。
- 3.React hooks 的写法 - 介绍基础的 React hooks 写法，以及常用的 hooks。
该课程需要这些前置知识：
- 1.HTML，JS，CSS 基础。
- 2.基础的数据结构/算法知识，如二叉树，深度遍历等。
- 3.会使用浏览器提供的 DOM API 来修改 DOM，更新 UI。
React的设计思想 - UI编程痛点
- 1.状态更新，UI不会自动更新，需要手动地调用DOM进行更新
- 2.欠缺基本的代码层面的封装和隔离，代码层面没有组件化
- 3.UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到Callback Hell
响应式编程
- 1.状态更新，UI自动更新
- 2.前端代码组件化，可复用，可封装
- 3.状态之间的互相依赖关系，只需声明即可
组件化
- 1.组件是组件的组合/原子组件
- 2.组件内拥有状态，外部不可见
- 3.父组件可将状态传入组件内部 课后推荐我们学习了next.js框架
React 的实现
Virtual DOM（虚拟DOM）
Virtual DOM 是一种用于和真实 DOM 同步，而在JS内存中维护的一个对象，它具有和DOM类似的树状结构，并和DOM可以建立一一对应的关系
How to Diff
完美的最小 Diff 算法，需要 O(n^3)的复杂度
牺牲理论最小Diff，换取时间，得到了O(n)复杂度的算法
不同类型元素 替换
相同类型元素 更新
同类型的组件元素 递归
React 状态管理库
核心思想：将状态抽离到UI外部进行统一管理
