学习React|青训营笔记

66 阅读2分钟

这是我来参加[第五届青训营]笔记创作活动的第六天。

今天是跟着牛岱老师学习React

React的应用场景,大部分研发体系都是基于React。

1、可以前端应用开发中使用,例如facebook、instagram的网页版。

2、可以用于移动应用开发,例如Instagram、Discord。

3、结合Electron进行桌面应用开发,平时常用的都是用React开发的。

image.png

React的设计思路

JS-UI痛点

当状态更新时,UI不会自动更新,需要我们手动去调用DOM进行更新;代码层面没有组件化;UI之间的数据依赖关系,需要手动维护,如果依赖链过长,会遇到难以解决的回调地狱问题。

响应式与转换式

响应式系统包括监听事件、消息驱动、监控系统、UI界面。响应式编程解决UI编程的几个痛点,能够让状态更新的时候UI更多去更新,提高效率,减少手动维护。

转换式系统包括给定输入求解输出、编译器、数值计算等。

组件化

组件设计:组件声明了状态和UI映射、组件有Props/State两种状态、组件可由其他组件拼装而成

组件代码:组件内部拥有私有状态state、组件接收外部的props状态提供复用性、根据当前的state/props返回一个UI

React生命周期

image.png

推荐的状态管理库

image.png

老师提到了应用级框架科普,课后需要多加了解

image.png

总结:本节课中,了解了React的历史和应用、设计思路。加强了我对框架的认知,了解框架可以方便应用的开发过程,提高开发效率。