react
1. React的历史与应用
2010
Facebook 开源了PHP 语言 的一种扩展叫—— XHP,可以在 PHP 中创建 Composite Components。你去看 XHP 就会发现语法和 JSX 很像。事实上,之后,他们也将这种新语法引入到了 React 中。
2011
Jordan Walke 创建了 FaxJS ,它就是 React.js 早期的原型。
2012
Facebook 想要一个比较好的解决方案来处理他们广告比较难以管理的问题,于是 Jordan Walke 就开始了 React 的原型创建工作
2014
年初,#reactjsworldtour 大会开始,目的是构建 React 的社区,React Hot Loader 发布。
2015
年初,Flipboard 发布了 React Canvas,React Native for Android 发布
2017
Airbnb 介绍了他们的开源库 React Sketch.app
2018
React v16.3.0 发布
2. React的设计思路
UI 编程痛点
01.状态更新,UI不会自动更新, 需要手动地调用DOM进行更新。
02.欠缺基本的代码层面的封装和隔离,代码层面没有组件化。
03.UI之间的数据依赖关系,需要手动维护,如果依赖链路长,则会遇到“Callback Hell”。
响应式系统
graph TD
事件 --> 执行既定的回调 --> 状态变更
前端UI
graph TD
事件 --> 执行既定的回调 --> 状态变更 --> UI更新
响应式编程
01.更新,UI自动更新。
“状态更新,UI不会自动更新,需要手动地调用DOM进行更新。”
02.前端代码组件化,可复用,可封装。
“欠缺基本的代码层面的封装和隔离,代码层面没有组件化。”
03.状态之间的互相依赖关系,只需声明即可。
“UI之间的数据依赖关系,需要手动维护,如果依赖链路长,则会遇到“Callback Hell”。”
组件化
1.组件是组件的组合/原子组件。
2.组件内拥有状态,外部不可见。
3.父组件可将状态传入组件内部。
3. React (hooks)的写法
Virtual DOM (虚拟DOM) Virtual DOM是- -种用于和真实DOM同步,而在JS内存中维护的一个对象,它具有和DOM类似的树状结构,并和DOM可以建立一-对应的关系。
它赋予了React 声明式的API :您告诉React希望让UI是什么状态, React就确保DOM匹配该状态。这使您可以从属性操作、事件处理和手动DOM更新这些在构建应用程序时必要的操作中解放出来。
4. React的实现
graph TD
不同类型的元素 --> 替换
graph TD
同类型的DOM元素 --> 更新
graph TD
同类型的组件元素 --> 递归