这是我参与「第五届青训营 」伴学笔记创作活动的第 6 天
一、本堂课重点内容:
- React 的历史与应用
- React 的设计思路
- 介绍 React 的设计思想，为什么 React 要设计成这样。
- React hooks 的写法
- 介绍基础的 React hooks 写法，以及常用的 hooks。
二、详细知识点介绍:
2.1 React 的历史与应用
2.1.1 发展历史
- 2010年 Facebook 在其 php 生态中，引入了 xhp 框架，首次引入了组合式组件的思想，启发了后来的React的设计。
- 2011年 Jordan Walke 创造了FaxJS，也就是后来的React原型:
- 2012年在Facebook 收购 Instagram 后，该 FaxJS 项目在内部得到使用, Jordan Walke 基于 FaxJS 的经验开发出了
React - 2014年-今天 生态大爆发，各种围绕React的新工具/新框架开始涌现
2.1.2 应用
- 前端应用开发，如
Facebook、Netflix网页版 - 移动端原生应用，如
Android、IOS的app - 结合
Electron，进行桌面应用开发
2.2 React 的设计思路
2.2.1 UI编程的痛点
- 状态更新的时候，
UI不会自动更新，需要手动调用DOM接口进行更新 - 欠缺基本的代码层面的封装和隔离，代码层面没有组件化
UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到" Callback Hell "
2.2.2 响应式与转换式
- 转换式系统：给定输入求解输出，比如编译器的实现，数值计算等场景
- 响应式系统：监听事件，由消息驱动，需要有一个监控系统去关注事件，并对事件做出响应，更新
UI界面
2.2.3 响应式编程
- 状态更新，
UI也会进行更新 - 前端代码组件化，可复用，可封装
- 状态之间的互相依赖关系，只需声明即可
2.2.4 组件化
用树状结构表示组件之间的关系
- 组件是组件的组合/原子组件
- 组件内拥有自己的状态，外部不可见
- 父组件可将状态传入组件内部
2.2.5 状态归属问题
下面这个图中，右上角的当前价格数据应当归属到那个组件去管理？
2.2.6 组件设计
-
组件声明了状态和
UI的映射 -
组件有
Props/State两种状态，前者是父组件传入的数据，后者是组件内部维护的数据 -
组件可由其他组件拼装而成
2.3 介绍 React 的设计思想，为什么 React 要设计成这样
2.4 React hooks 的写法
2.5 介绍基础的 React hooks 写法，以及常用的 hooks
三、实践练习例子：
四、课后个人总结：
五、引用参考：
- 我参考了哪些外部博客/笔记/文章？
- 文章中有什么地方是我参考引用了外部博客/笔记/文章的？
