这是我参与「第四届青训营 」笔记创作活动的的第四天
简介
React是用于构建用户界面的JavaScript库
发展历史
-
2010年Facebook在其php生态中，引入了xhp框架，首次引入了组合式组件的思想，启发了后来的React的设计
-
2011年Jordan Walke创造FaxJS，也就是后来的React原型:
-
2012年在Facebook收购Instagram 后，该FaxJS项目在内部得到使用, Jordan Walke基于FaxJS的经验开发出了React
-
2013年-React正式开源，在2013 JSConf上Jordan Walke介绍了这款全新的框架
-
2014年至今，React生态大爆发，各种围绕React的新工具/新框架开始涌现
React的应用
- 前端应用，如
Facebook、Instagram网页版 - 移动端应用，如
Instagram,Discord - 桌面应用，结合
Electron开发
React的设计思路
首先我们来看看什么是响应式系统和组件化：
-
系统
- 转换式系统：给定输入求解输出，例如编译器以及数值计算
- 响应式系统：监听事件，消息驱动，监控系统，UI界面（React即是响应式系统）
转换式系统说明：
-
组件化：
- 组件是组件的组合/原子组件
- 组件内拥有状态，外部不可见
- 父组件可将状态传入组件内部
-
组件特点：
- 组件声明了状态和UI的映射
- 组件有Props/State两种状态（State储存内部数据，Props接受外部数据，组件通过整合两种状态返回一个UI）
- “组件”可由其他组件拼装而成
UI编程痛点：
- 状态更新，UI不会自动更新，需要手动调用DOM进行更新
- 欠缺基本的代码层面的封装和隔离，代码层面未组件化
- UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会出现回调地狱
React就是为了解决以上痛点而出现的
-
状态更新，UI自动更新
-
前端代码组件化，可复用+封装
-
状态之间的互相依赖关系，只需要声明即可
虚拟DOM（Virtual DOM）
Virtual DOM是一种和真实DOM（真实DOM在浏览器中）同步，在JS内维护的一个树状结构，可以和真实DOM建立一一对应的关系。
DIFF算法
完美的最小Diff算法，需要O(n^3)的复杂度，牺牲理论最小Diff,换取时间，可得到O（n）复杂度的DIFF算法
整体总结
通过这节课我对REACT的内部结构有了更深的认识，明白到了响应式系统相比于传统模式的优越性，希望这篇文章可以对大家有所帮助！
