React01 | 青训营笔记

35 阅读2分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天

1、react历史

Jordan Walke 是react的创造者

他是先创造出了FaxJS,之后在应用后创造出了react,也就是说react脱胎于FaxJS,基于FaxJS创造的 image.png

2013年,脸书将其开源 image.png

2、react的设计思路

从转换式系统向响应式系统转换 image.png 因为前端并不是很固定的,给定输入求输出,而是动态的,根据状态去做相应的改变,就更倾向于监听事件,类似监听鼠标,键盘按键之类的

响应式系统

image.png

转换式系统关于UI的痛点

image.png

响应式系统与转换式的区别

红色的字是关于响应式的

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

总结

因此,组件可以理解为是组件的组合,原子组件

组件内拥有自己的状态,而且外部是不可见的(State)

父组件可以将状态传入子组件内部,通过Props

也就是说一个组件的状态是包含两方面的,一个是自己的状态,另一个是从父亲那继承过来的,父亲的状态

所以React是单向数据流,因为它的数据只能单向流通,,由父组件向子组件传值,传递内容,状态;而子组件是不能向父组件传递内容的,只能通过函数回调的形式对父组件进行一定程度上的改变,但并不是对父组件的传值,所以为单向数据流,不是双向数据流!

组件设计

  • 1、组件声明了状态和UI的映射。即UI和状态的对应关系

  • 2、组件有Props和State两种状态

  • 3、“组件”可由其他组件拼装而成