响应式系统与React | 青训营笔记
这是我参与「第四届青训营 」笔记发明活动的第3天
React的前史与运用
运用场景
- 前端运用开发,如
Facebook
、Netflix
网页版 - 移动端原生运用,如
Android
、IOS
的app - 结合
Electron
,进行桌面运用开发
开展前史
- 2010年 Facebook 在其 php 生态中,引入了 xhp 框架,首次引入了组合式组件的思想,启发了后来的React的设计。
- 2011年 Jordan Walke 发明晰FaxJS,也便是后来的React原型:
- 2012年在Facebook 收购 Instagram 后,该 FaxJS 项目在内部得到运用, Jordan Walke 根据 FaxJS 的经历开发出了
React
- 2014年-今天 生态大爆发,各种环绕React的新工具/新框架开始呈现
React的设计思路
UI编程的痛点
- 状况更新的时分,
UI
不会自动更新,需求手动调用DOM
接口进行更新 - 欠缺根本的代码层面的封装和阻隔,代码层面没有组件化
-
UI
之间的数据依靠联系,需求手动保护,假如依靠链路长,则会遇到回调阴间
React
的呈现,便是为了解决这三大痛点
呼应式与转化式
- 转化式体系:给定输入求解输出,比如编译器的完成,数值计算等场景
- 呼应式体系:监听事情,由消息驱动,需求有一个监控体系去关注事情,并对事情做出呼应,更新
UI
界面
前端开发的场景中,转化式体系不适合,而呼应式体系就能完美解决前面的三大痛点
呼应式编程
- 状况更新,
UI
也会进行更新 - 前端代码组件化,可复用,可封装
- 状况之间的相互依靠联系,只需声明即可
组件化
用树状结构表示组件之间的联系
- 组件是组件的组合/原子组件
- 组件内拥有自己的状况,外部不可见
- 父组件可将状况传入组件内部
状况归属问题
下面这个图中,右上角的当时价格数据应当归属到那个组件去管理?
答案是归于根节点Root,由于这个属性会被多个子组件共享
这也导致了一个问题,当多个子组件需求共享数据的时分,就得将共享数据提升到父组件中,这其实是不好的
已然现在知道当时价格是由Root
结点管理的,那子组件需求修正当时价格时该怎么办呢?
由于在js
中,函数是一等公民,所以可以将函数也作为属性传递给子组件,那么就可以在Root
组件中界说一个修正当时价格的函数,然后将这个函数传给子组件,当子组件需求修正当时价格时,就调用该函数即可
组件设计
- 组件声明晰状况和
UI
的映射 - 组件有
Props/State
两种状况,前者是父组件传入的数据,后者是组件内部保护的数据 - 组件可由其他组件组装而成