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

101 阅读2分钟

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

这是我参与「第四届青训营 」笔记创作活动的的第15天。

一、React的应用与历史

01 应用

前端应用开发,如Facebook , Instagram , Netflix网页版。

image.png

移动原生应用开发,如Instagram , Discord , Oculus。

image.png

结合Electron,进行桌面应用开发。

image.png

02 历史

2010年Facebook在其pbp生态中,引入了xhp框架,首次引入了组合式组件的思想,启发了后来的React的设计。

2011年Jordan Walke创造了FaxJs,也就是后来的React原型:

image.png 2012年在Facebook收购Instagram后,该FaxJS项目在内部得到使用,Jordan Walke 基于FaxJs的经验,创造了React
2013年React正式开源,在2013 JSConf 上Jordan Walke介绍了这款全新的框架

image.png 2014年-今天生态大爆发,各种围绕React的新工具新框架开始涌现:

image.png

二、React的设计思路

01 React的设计思路-UI编程痛点

01.状态更新,UI不会自动更新,需要手动地调用DoM进行更新。
02.欠缺基本的代码层面的封装和隔离,代码层面没有组件化。
03.uI之间的数据依赖关系,需要手动维护,如果依赖链路长,则会遇到"Callback Hell”。

02 React的设计思路-响应式与转换式

image.png

image.png

03 React的设计思路-响应式编程

image.png 01.状态更新,UI自动更新。
02.前端代码组件化,可复用,可封装。
03.状态之间的互相依赖关系,只需声明即可。

04 React的设计思路-组件化

1.组件是组件的组合/原子组件
2.组件内拥有状态,外部不可见
3.父组件可将状态传入组件内部

05 React的设计思路-生命周期

image.png