本文为知乎live内容摘要，主讲人尤雨溪
组件
最初一个页面 后来封装 组件树
react 组件可以是函数
分类
- 展示型
- 接入型 和数据源打交道
- 交互型 （展示型的封装和加强） element-ui 复杂交互逻辑 通用逻辑 复用
- 功能型 抽象、不渲染内容、作为扩展和抽象机制 vue的路由、Translation组件
jsx完成功能型组件时优势更大
组件的代码切分
colocation 单文件组件
变化侦测和渲染机制
渲染机制
1.声明式 Declarative
描述数据和DOM的映射关系
2.命令式 Imperative
Virtual DOM 目前的实现很轻量化 git找找看 可以自己实现
变化侦测
- pull 暴力遍历检查 react angular 粗粒度更新 性能上目前不存在问题
- push 细粒度更新 vue 中粒度 组件级别push 每个组件是响应级别的watcher 组件内部VirtualDom比对
push pull 本质区别 侦测成本换取一定程度的自动优化
状态管理
react redux mobx
vue(mobx) vuex(redux)
状态管理做的是：事件源到状态的迁移和改变
（声明式的渲染帮助解决了从状态到UI的映射）
- redux 数据不可变
- vue以及mobx 数据可变 响应式
没有完美的方案
建议方案
- 简单CRUD 杀鸡不用牛刀 简单封装rest api
- 实时、服务端主动推送 RxJS 流 vue-rx
状态管理方案还面临的一些问题
- 全局状态、局部状态区分
- 全局状态、服务端数据
路由
大型单页应用
早期侵入式
react、vue出现 组件可以和路由解耦
组件作为路由映射的基本元素
url到组件的映射–分歧
- 从url出发
- 从状态出发
本质一样，url就是一个序列化的状态
SPA应用中
hash模式和history模式兼容、重定向、别名、懒加载、复杂跳转(路由间钩子、钩子中的异步操作、钩子中取消跳转)
web路由和app路由的区别
css方案
跟js解耦，预处理器保证维护性
css modules 通过编译避免命名全局冲突
css-in-js方案 react社区为代表
构建工具
构建工具解决的问题：
- 任务自动化
- 开发体验和效率（新的语言功能、语法糖、热加载等等）
- 部署相关的需求
- 编译时优化
服务端数据通信
服务端Rest风格接口
复杂场景 graphql
- 数据直连、数据之间有大量的关联性的需求
- 实时推送同步的需求
服务端渲染
跨平台渲染
从前端框架的角度去看，跨平台渲染的本质是在设计框架的时候要让框架的渲染机制和DOM解耦，这里面有很多种实现方式，并不一定需要Virtual Dom，本质上只要把框架更新时候的一些节点操作封装起来，你就可以做到跨平台，一个原生的渲染引擎，比如 React Native 和 VueX本质都是在底层针对每个平台有一个适配的渲染引擎，只要把渲染引擎暴露的结点操作的 API，跟框架运行时对接一下，就可以实现将框架里面的代码渲染到原生的目的。这里的解耦很清晰，这也是为什么能看到 NG 可以接 React Native，VueX 可以跑 Vue 文件，VueX 可以跑在 NativeScript 上等等。
新规范
Web Component
Web Component 和类 React、Angular、Vue 组件化技术谁会成为未来？
WebAssembly
面向 Web 的通用二进制和文本格式，可以跑在浏览器里面。但是在目前的形势下，WebAssembly 暂时还操作不了 DOM，对于框架的影响暂时比较有限。
图片处理、3D游戏、挖矿？
总结
技术方案都是先有问题，再有思路，同时伴随着取舍。在选择衡量技术的时候，尽量去思考这个技术背后是在解决什么问题，它做了怎样的取舍。这样一方面可以帮助我们更好的理解和使用这些技术，也为以后哪天你遇到业务中的特殊情况，需要自己做方案的时候打好基础。