前端发展
2021-12-20 16:30:30 19 举报AI智能生成
前端发展
作者其他创作
大纲/内容
php
jsp
技术栈
服务端通过模板引擎填充数据，返回HTML，交给浏览器渲染
过程
服务端渲染
异步请求，服务端返回 XML 或 JSON
Ajax 技术
操作 dom 渲染和交互
频繁操作 DOM API 贼烦
浏览器兼容性
缺点
基于浏览器 DOM API
工具函数
命令式的思想
jQuery
U=f(x)
声明组件的视图
组件状态数据
组件间的依赖关系
声明式的思想
引入了插值、指令、过滤器等模板语法
template 编译器
实现了一套 template 的 DSL
template 受限，只能访问 data、prop 和 method，可做静态的分析和优化
和 JS 上下文割裂，引入 TypeScript 做类型推导比较困难
实现
渲染出局部虚拟 DOM，组件内部监听数据变化
一次更新计算量特别大，可能导致丢帧，渲染卡顿
大组件拆小组件，保证一个属性不要有太多的 watcher
优化
option对象的方式
很难区分混入的属性、方法的来源
乱
代码维护性差
逻辑复用通过对象属性的 mixin
组件形式
代表：Vue
Object.defineProperty 监听对象属性的变化
重写数组的 API 监听数组元素的变化
进行 DOM 更新
watch
代表： Angular
每个可能改变数据的逻辑之后对比下数据是否变了
数据变了就更新 DOM
脏检查
给 JS 扩展了 JSX 的语法，由 Babel 实现，描述视图的时候直接用 JS 写逻辑
是 JS 的语法，动态逻辑比较多，没法做静态的分析和优化
和 JS 是同一个上下文，结合 TypeScript 很自然
一般是通过递归来做
组件树
如果通过链表记录路径，就可以变成循环，然后按照时间片分段，让 vdom 的生成不在阻塞页面渲染，就像操作系统对多个进程的分时调度一样
没有parent、children 这类属性
多了 child、subling 和 return 属性
组件树改成链表，把 vdom 生成递归改为循环功能就是 react fiber
链表树
深度有先
广度优先
树的遍历
渲染出全局 VDOM，然后 diff
对于不需要重新生成 vdom 的组件，通过 shouldComponentUpdate 跳过渲染 render
render 内部做了组件树的链表化（fiber），把递归改成可打断的渲染，按照时间片来逐渐生成整个 VDOM
class 和 function 两种形式
HOC，高阶组件，high order component，组件套组件，父组件里执行部分逻辑渲染子组件
render props，没有逻辑部分 JSX 作为 props 传入另外一个组件来复用
复用方式
class 组件有 state，编程 fiber 节点依然有
加入了 memorizedState 属性存储数据
组件里通过 API 来使用这些数据，这些 API 就是 hooks api
因为使用 fiber 节点上的数据，就把 api 命名改为 useXxx
map 要指定 key
数组保证顺序不能变，所以不能出现在 if 等逻辑块中，只能在顶层
每个 hooks api 都要有自己存放数据的地方，一种是map，一种是数组
在 fiber.memoriedState 的对应元素存放数据
最简单的存储形式
useState
值是缓存的函数计算的结果
state 变换后重新计算值
相当于 vue 的 getter
useMemo
值是函数，state 变换后重新执行
是 useMemo 在值为函数的场景下的简化 api
useCallback
值为 reducer 返回的结果
通过 action 来触发值的变更
useReducer
值为 { current: 具体值 } 的形式
因为对象不变，只是 current 属性变了，所以不会修改
可以放一些不变的数据
useRef
数据类
异步执行函数，state 变换后会再次执行，当组件销毁时会调用返回的清理函数
useEffect
渲染完成后同步执行函数，可拿到 DOM
useLayoutEffect
逻辑类
dom 元素只能通过 ref 转发
在父组件创建 ref，子组件把元素传过去，传过去之前做一些修改，就可以用 useImperativeHandle 来改
ref 转发专用
hooks api 分类
function 组件本来没有 state，变成 fiber 后依旧没有
代表：React
不直接渲染到 DOM，中间加了一层虚拟 DOM，每次都渲染虚拟 DOM
diff 渲染出的虚拟 DOM 是否变了
变了就更新对应的 DOM
不检查
数据驱动视图设计思路
MVVM 框架
DOM
jQuery 作为操作 DOM 工具函数
拿到数据渲染 DOM
数据变化后更新 DOM
数据驱动
物理层
把一部分 DOM 封装起来
组件
组件和组件之间相互组合，构成界面
逻辑层
分层
自动把数据的变更映射到 DOM
原理
客户端渲染
逻辑层的组件方案
基于组件方案重新实现服务端渲染
轮回路线
物理层不变
提高生产效率
降低开发成本
保证质量
技术发展趋势
逻辑层变换
注意
网页
前端发展
0 条评论
回复 删除
下一页
