首页  思维导图  详情

前端发展

2021-12-20 16:30:30   19  举报





AI智能生成

前端发展

SSR

CSR

react

vue

JQuery

作者其他创作

大纲/内容

服务端渲染

技术栈

php

jsp

过程

服务端通过模板引擎填充数据，返回HTML，交给浏览器渲染

Ajax 技术

异步请求，服务端返回 XML 或 JSON

基于浏览器 DOM API

操作 dom 渲染和交互

缺点

频繁操作 DOM API 贼烦

浏览器兼容性

jQuery

工具函数

命令式的思想

MVVM 框架

声明式的思想

U=f(x)

声明组件的视图

组件状态数据

组件间的依赖关系

数据驱动视图
设计思路

watch

代表：Vue

实现

实现了一套 template 的 DSL

引入了插值、指令、过滤器等模板语法

template 编译器

template 受限，只能访问 data、prop 和 method，可做静态的分析和优化

和 JS 上下文割裂，引入 TypeScript 做类型推导比较困难

优化

渲染出局部虚拟 DOM，组件内部监听数据变化

一次更新计算量特别大，可能导致丢帧，渲染卡顿

大组件拆小组件，保证一个属性不要有太多的 watcher

组件形式

option对象的方式

逻辑复用通过对象属性的 mixin

很难区分混入的属性、方法的来源

乱

代码维护性差

过程

Object.defineProperty 监听对象属性的变化

重写数组的 API 监听数组元素的变化

进行 DOM 更新

脏检查

代表： Angular

过程

每个可能改变数据的逻辑之后对比下数据是否变了

数据变了就更新 DOM

不检查

代表：React

实现

给 JS 扩展了 JSX 的语法，由 Babel 实现，描述视图的时候直接用 JS 写逻辑

是 JS 的语法，动态逻辑比较多，没法做静态的分析和优化

和 JS 是同一个上下文，结合 TypeScript 很自然

树的遍历

深度有先

组件树

一般是通过递归来做

链表树

如果通过链表记录路径，就可以变成循环，然后按照时间片分段，让 vdom 的生成不在阻塞页面渲染，就像操作系统对多个进程的分时调度一样

组件树改成链表，把 vdom 生成递归改为循环功能就是 react fiber

没有parent、children 这类属性

多了 child、subling 和 return 属性

广度优先

优化

渲染出全局 VDOM，然后 diff

对于不需要重新生成 vdom 的组件，通过 shouldComponentUpdate 跳过渲染 render

render 内部做了组件树的链表化（fiber），把递归改成可打断的渲染，按照时间片来逐渐生成整个 VDOM

组件形式

class 和 function 两种形式

复用方式

HOC，高阶组件，high order component，组件套组件，父组件里执行部分逻辑渲染子组件

render props，没有逻辑部分 JSX 作为 props 传入另外一个组件来复用

class 组件有 state，编程 fiber 节点依然有

function 组件本来没有 state，变成 fiber 后依旧没有

加入了 memorizedState 属性存储数据

组件里通过 API 来使用这些数据，这些 API 就是 hooks api

因为使用 fiber 节点上的数据，就把 api 命名改为 useXxx

每个 hooks api 都要有自己存放数据的地方，一种是map，一种是数组

map 要指定 key

数组保证顺序不能变，所以不能出现在 if 等逻辑块中，只能在顶层

hooks api 分类

数据类

useState