这是我参与[第五届青训营]伴学笔记创作活动的第三天
一、响应式系统与React
入门需要有HTML 、JS、CSS基础, 基础的数据结构/算法知识 会使用浏览器提供的DOM、API 来修改DOM更新UI
01.React的历史与应用
-
前端的网页版:如Facebook 、Instagram、Netfix网页版
-
移动原生应用开发:如 IOS、Instagram 、Discord、Oculus
-
结合Electron 进行桌面应用开发 React Three Fiber
历史:facebook再用php写后端框架时,引入了xhp框架,首次引入了组合式组件的思想,启发了React的设计
Jordan Walke创造了FaxJS ,也就是React的原型
- Seamless Client Server Rendering 框架可以在客户端和服务端渲染
- Reactive响应式,当状态变更UI也会随之更新
- Performant性能更优越
- Structural给前端代码做了一个组件级别的复用和安装,组件是用函数来声明的
facebook收购Instagram之后Faxjs得到内部使用 2013年React正式开源
02.React的设计思路
UI编程的痛点
1.用JavaScript写UI,当状态(自己声明的变量)更新时,UI不会自动更新,需要手动调用DOM进行更新
2.欠缺代码层面的封装和隔离,代码层面没有组件化
3.UI之间的数据依赖关系,需要手动维护,如果依赖链路长就会遇到“Callback Hell”
响应式系统:事件发生时监听事件,消息驱动 事件发生时做什么事情 如监听系统UI界面
转换式系统 给定[输入]求解[输出]把原代码‘字符串’经过转化输出成一个二进制如编译器、数值计算
事件 到执行既定的回调 到状态变更 到UI 更新
响应式编程:
1.状态更新,UI自动更新
2.前端代码组件化,可复用,可封装,有语义,对应于一个视觉层的代码
3.状态之间的互相依赖关系不需要手动维护,只需声明即可
组件化 1.组件是组件的组合、原子组件
2.组件内拥有状态,外部不可见
3.父组件可将状态传入组件内部
状态归属于两个节点向上寻找到最近的祖宗节点
组件设计
1.组件声明了状态和UI的映射
2.组件有Props/State两种状态
3.组件可由其他组件拼接而成 总结 React是一个声明式,高效灵活的用于构建用户界面的JavaScript库
标题:React 的历史与应用 - 掘金