这是我参与「第四届青训营 」笔记发明活动的第3天

React的前史与运用

运用场景

  1. 前端运用开发,如FacebookNetflix网页版
  2. 移动端原生运用,如AndroidIOS的app
  3. 结合Electron,进行桌面运用开发

开展前史

  • 2010年 Facebook 在其 php 生态中,引入了 xhp 框架,首次引入了组合式组件的思想,启发了后来的React的设计。
  • 2011年 Jordan Walke 发明晰FaxJS,也便是后来的React原型:

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

  • 2012年在Facebook 收购 Instagram 后,该 FaxJS 项目在内部得到运用, Jordan Walke 根据 FaxJS 的经历开发出了React
  • 2014年-今天 生态大爆发,各种环绕React的新工具/新框架开始呈现

React的设计思路

UI编程的痛点

  1. 状况更新的时分,UI不会自动更新,需求手动调用DOM接口进行更新
  2. 欠缺根本的代码层面的封装和阻隔,代码层面没有组件化
  3. UI之间的数据依靠联系,需求手动保护,假如依靠链路长,则会遇到回调阴间

React的呈现,便是为了解决这三大痛点

呼应式与转化式

  • 转化式体系:给定输入求解输出,比如编译器的完成,数值计算等场景
  • 呼应式体系:监听事情,由消息驱动,需求有一个监控体系去关注事情,并对事情做出呼应,更新UI界面

前端开发的场景中,转化式体系不适合,而呼应式体系就能完美解决前面的三大痛点

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

呼应式编程

  • 状况更新,UI也会进行更新
  • 前端代码组件化,可复用,可封装
  • 状况之间的相互依靠联系,只需声明即可

组件化

用树状结构表示组件之间的联系

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

  • 组件是组件的组合/原子组件
  • 组件内拥有自己的状况,外部不可见
  • 父组件可将状况传入组件内部

状况归属问题

下面这个图中,右上角的当时价格数据应当归属到那个组件去管理?

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

答案是归于根节点Root,由于这个属性会被多个子组件共享

这也导致了一个问题,当多个子组件需求共享数据的时分,就得将共享数据提升到父组件中,这其实是不好的

已然现在知道当时价格是由Root结点管理的,那子组件需求修正当时价格时该怎么办呢?

由于在js中,函数是一等公民,所以可以将函数也作为属性传递给子组件,那么就可以在Root组件中界说一个修正当时价格的函数,然后将这个函数传给子组件,当子组件需求修正当时价格时,就调用该函数即可

组件设计

  • 组件声明晰状况和UI的映射
  • 组件有Props/State两种状况,前者是父组件传入的数据,后者是组件内部保护的数据
  • 组件可由其他组件组装而成

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