React | 青训营笔记

111 阅读2分钟

这是我参与[第五届青训营]伴学笔记创作活动的第四天

1. React的历史与应用

1.

image.png

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

2.

image.png

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

3.

image.png

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

4.历史

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

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

image.png

2012年在Facebook收购Instagram后,该FaxJS项目在内部得到使用,Jordan Walke基于FaxJS的经验,创造了React。

2013年React正式开源,在2013JSConfJordan Walke介绍了这款全新的框架。

image.png

2014年生态大爆发,各种围绕React的新工具/新框架开始涌现。

image.png

2. React的设计思路

UI编程痛点

  1. 状态更新,UI不会自动更新,需要手动调用DOM自动更新。
  2. 欠缺的代码层面封装和隔离,代码层面没有组件化。
  3. UI之间的数据依赖关系,需要手动维护,如果依赖链路长,则会遇到Callback Hell

响应式与转换式

image.png

image.png

image.png

响应式编程

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

组件化

image.png

image.png

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

组件设计

  1. 组件声明了状态和UI映射。
  2. 组件有Props/State两种状态。
  3. 组件可由其他组件拼装而成。

生命周期

image.png

3.React(Hooks)的写法

image.png

image.png