Open ziwei3749 opened 6 years ago
不黑不吹聊聊前端框架
<router-view>
<transition>
关于模板和JSX的对比：
JSX最大的特点是灵活性，因为它具备JS这个语言的完全功能。 JSX最大的优点是在第四种，这个功能型组件上的强大是远超vue的模板的 但是vue模板呢，在展示型组件上写起来更爽，模板会强制性的让你把尽可能少的逻辑写在视图代码里。
关于组件化的Colocation
三大框架都是组件化的，都有会以一个组件为单位划分，把html.css.js该放到一起的放到一起 而以前流行的是，css js html文件
Declarative Programming 声明式编程 Imperative Programming 命令式编程
React中： view = render(state) Vue中.： .vue文件可以理解为跟jsx一样是一个语法糖。输入就是data，编译.vue文件就相当于执行了render，输出一个dom结构
自己写一个 Virtual DOM 库并不难。
vue里可以把click写在html上，和原生JS的区别，就是作用域的问题。原生的写出来作用域是全局的，很伤
变化侦测分2种：
pull :
react里的setState，包括ng1里的脏检查。 就是系统其实不知道数据什么时候变了，它需要一个信号，就是数据什么时候有可能会发生变化？ 一旦变化react里就会对虚拟dom做diff，ng里就是脏检查。所以这个是一个比较暴力的方式。 那能够这么做，是由于JS现在比较快，这么做性能上可以被接受。
push：
vue里双向数据绑定或者RX.JS里observer的一些东西。 数据一旦变化，vue就可以知道哪些数据发生了变化，这样就可以做细粒度的更新。 所以react的diff算法这么暴力比对可能会做一些无用功,所以在react开发里会有一些性能优化技巧,在shouldUpdateComponent里 不过vue这种所谓细粒度的更新也有代价。就是这个每一个绑定都要有对应的oberverable和watcher,会有内存的开销和依赖追踪的开销。 所以在vue2.0之后,push和pull结合起来用,在组件级别是Push,我们可以准确的检测到哪个组件变了,在组件内部是virtual dom 来 比对更新
本质上: push的做法就是用侦测成本换取一定程度的自动优化。实际上也比较不出哪个好,哪个坏
rx.js也和状态管理有一点关系
总得来说前端对状态管理还没有达成共识，但又没有特别大的分歧。
在现代web框架里,状态管理主要涉及event / state / view
event发生后,触发state的改变,state的变化触发view的变化。
而声明式渲染,其实vue /react已经做到了状态变化,对应视图就变化。
状态管理解决的主要是event到state变化的管理方案,如何把这个映射的部分抽离出来,更好的维护。
尤雨溪的看法呢:
redux本身是无法处理异步的,它是交给中间件来解决的。 react-thunk react-promise等方案,都很好用,但是写出来的代码差异有点大。 vuex觉得简单的项目不应该抽象太多层,如果真的项目复杂,也可以考虑增加rx.js来处理
这个可能是vuex/redux一点区别,但是他们也面临共同的一些问题:
缺乏划分全局状态和局部状态的标准和界限。
只有在大型单页应用才会遇到的问题。最早的路由是比较有侵入性的,比如Ember.js
但是vue/react这种专注视图层的库出现后,其实把路由解耦出来是完全可行的。而且会发现从组件去思考,其实前端路由就是实现一个url映射到组件树结构的过程
这样考虑的话,就会觉得路由的实现,就像一个动态组件一个,url变化就切换组件。
看上去很容易,实际上路由会涉及到很多复杂情况:
真正实现起来,还是有一些复杂度的。
目前router的实现方式比较相似,但react-router4的变化较大
推崇的是用组件本身去做路由的思路。之所以可以这么做,就是很好的利用了jsx对功能性组件的强大支持
跟前其他router实现的一个明显区别就是去中心化的。
web路由和app路由的区别
主流的 CSS 方案
css in js可能是比较有争议的
构建工具解决的其实是几方面的问题：
关于部署 https://www.zhihu.com/question/20790576
不一定用虚拟dom,跟底层渲染引擎解耦就行。
不黑不吹聊聊前端框架
不黑不吹聊聊前端框架
一：组件的理解和分类
<router-view>，<transition>，作为一种扩展、抽象机制存在。JSX最大的特点是灵活性，因为它具备JS这个语言的完全功能。 JSX最大的优点是在第四种，这个功能型组件上的强大是远超vue的模板的 但是vue模板呢，在展示型组件上写起来更爽，模板会强制性的让你把尽可能少的逻辑写在视图代码里。
三大框架都是组件化的，都有会以一个组件为单位划分，把html.css.js该放到一起的放到一起 而以前流行的是，css js html文件
二： 变化侦测机制
Declarative Programming 声明式编程 Imperative Programming 命令式编程
React中： view = render(state) Vue中.： .vue文件可以理解为跟jsx一样是一个语法糖。输入就是data，编译.vue文件就相当于执行了render，输出一个dom结构
自己写一个 Virtual DOM 库并不难。
vue里可以把click写在html上，和原生JS的区别，就是作用域的问题。原生的写出来作用域是全局的，很伤
变化侦测分2种：
pull :
push：
本质上: push的做法就是用侦测成本换取一定程度的自动优化。实际上也比较不出哪个好,哪个坏
三、状态管理
rx.js也和状态管理有一点关系
总得来说前端对状态管理还没有达成共识，但又没有特别大的分歧。
在现代web框架里,状态管理主要涉及event / state / view
event发生后,触发state的改变,state的变化触发view的变化。
而声明式渲染,其实vue /react已经做到了状态变化,对应视图就变化。
状态管理解决的主要是event到state变化的管理方案,如何把这个映射的部分抽离出来,更好的维护。
尤雨溪的看法呢:
这个可能是vuex/redux一点区别,但是他们也面临共同的一些问题:
四、路由
只有在大型单页应用才会遇到的问题。最早的路由是比较有侵入性的,比如Ember.js
但是vue/react这种专注视图层的库出现后,其实把路由解耦出来是完全可行的。而且会发现从组件去思考,其实前端路由就是实现一个url映射到组件树结构的过程
这样考虑的话,就会觉得路由的实现,就像一个动态组件一个,url变化就切换组件。
看上去很容易,实际上路由会涉及到很多复杂情况:
真正实现起来,还是有一些复杂度的。
推崇的是用组件本身去做路由的思路。之所以可以这么做,就是很好的利用了jsx对功能性组件的强大支持
跟前其他router实现的一个明显区别就是去中心化的。
五、CSS方案
主流的 CSS 方案
六、构建工具
构建工具解决的其实是几方面的问题：
关于部署 https://www.zhihu.com/question/20790576
服务端渲染 ssr.vuejs.org
跨平台渲染
不一定用虚拟dom,跟底层渲染引擎解耦就行。