总览

不吹不黑前端框架–尤大 live

摘自尤大 live。

不谈场景聊框架就是耍流氓。前端产品形态差异很大，开发者也不同。努力让不同偏好的开发者都更有效。

react 的最大贡献是组件可以是函数，在函数里面，组件树的实现是更通的。

组件分类：

• 接入型(container)

• 展示型

• 交互型(类似于 antd 的组件库，独立使用，够复杂)

• 功能型(router 这种纯功能的)

模板和 jsx 的对比

jsx 更灵活，写功能型组件更强。模板写展示型更爽，并且强制让你把逻辑不放在模板中，让你用视图化的方式来思考。

组件都是 collection，css，js，html 都是在一起。传统语言是以各个语言来做切分，而组件是以组件本身来切割。

现代的渲染框架都是申明式的。之前 jquery 就是标准的命令式。现在的就是申明好组件与事件之间的关系。

为什么之前申明式的写法 onClick 是被人诟病的，而 react，view 里面都是这么写的。因为之前是全局作用域，现在都把作用域收好了。

pull 和 push

react，angular 是 pull。因为他们不知道是什么变了，所以会需要发一个信号，然后进行整体的比对，例如 virtual dom 的比对或者脏检查。
push 的代表就是 rx 或者 vue，数据变动之后立刻知道并且知道什么改了。

pull 的粒度很粗。所以需要开发者帮助，使用 purecomponent 或是 shouldComponentUpdate 来帮忙。
但是 push 也有代价，因为信息更多就得更细粒度的 observable。内存开销和依赖追踪的开销。
vue2 就是折中的，粗粒度的。组件级别的是 push，进行监听，然后组件内部就是 pull，进行 virtual dom 的比对。
他们的区别就是用侦测成本换一定程度的自动优化。

状态管理：

mobx 和 vue 几乎是一样的。
vuex 受到了 redux 的影响。
rxjs 跟状态管理也有很密切的关系。

本质都是从源事件，到状态改变，再到 ui 变化。

申明式渲染把状态到 ui 变化已经做好了。所以这些状态管理解决的是源事件到状态的绑定。

redux 和 mobx 是两种范式，redux 强调的是数据不可变，函数式的。mobx 则是可变的，但是不是手动处理，是申明式的写副作用。所以维护性还好。本质相似。

并不能说哪个比哪个好，但是异步都没处理。redux 是交给中间件做，mobx 是让用户自己随便整。

复杂异步倾向于 rxjs。

从头到尾就是流，cyclejs。需要对 rxjs 非常熟练。但是应用的适用范围不一定广。

组件的局部状态和全局状态怎么区分？值得是分析的，elm 到底是什么？？？？

路由

react-router4 是去中心化，灵活性很好。但是对于理解整个结构没好处，对于跳转要弱一些，会耦合到组件中。

web 和原生的还不太一样。web 的之前的页面是销毁，而原生的则是叠加的。

配置工具

grunt 和 gulp 的问题是他们是 task runner，但是实际上 npm script 已经够强了。

webpack 之所以这么复杂，是因为他要处理的问题更复杂。rollup 简单是因为他处理的问题更简单。

后端数据是否应该放到前端 state 中？

尤大觉得不建议放，因为前端没法修改。但是我觉得我们要管理数据，尤其是在多页面，或者是多模块都需要这部分数据的时候。然后要管理的话还是放在 state 里面方便些，毕竟主要是数据驱动，新起一个地方放数据有些多此一举。

新技术

webassembly 摸不了 dom，所以问题还好。而且主要的性能瓶颈 doom diff 的地方还好。

---

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 981909093@qq.com