React,一次学习,到处编码

2016-11-20 尹锋&池建强 MacTalk MacTalk

11月「卖桃者说」的开放订阅日期截止到今晚24点。已经订阅的,会在今晚推送以前的历史邮件。下次开放等12月吧。

今天的文章来自攻城狮群(参考 MacTalk 自定义菜单介绍),我写了引语。

React 来自于 Facebook,这门前端技术的 Slogan 是 Learn once,write anywhere。尽管我们早些年已经被 Java 的 Write once,run everywhere 伤透了心,但是现在前端框架风起云涌,诸侯割据,如果真的有一门技术能够 anywhere 和 everywhere,还是很让人向往的。

React 能做什么呢,能做这么多

1、Web: https://facebook.github.io/react/
2、Native: https://facebook.github.io/react-native/
3、TV: https://github.com/jordanbyron/react-native/tree/tvOS
4、Desktop: https://github.com/ptmt/react-native-desktop

似乎已经全终端覆盖了,React 号称能让新人第一天使用就能开发出新功能。这是怎么做到的呢?

React 特性:

1、用 JSX 语法取代 HTML 模板,在 JavaScript 里声明式地描述 UI
2、虚拟 DOM 取代物理 DOM 作为操作对象,封装了 DOM 的事件系统
3、单向数据流动
4、组件和基于组件的设计流程

Facebook 创造了 JSX 语法,取代了我们常用的模板引擎,允许我们可以直接在 js 文件中来使用 JSX,这种语法结合了 HTML 和 JavaScript 的优势,既能像平常一样使用 HTML,同时又能在 HTML 中使用强大的 JavaScript 语言。相当于我们可以把 View 和 JavaScript 逻辑写在同一个文件里面。

以下是「React,改变前端开发方法的技术」完整版链接:

https://github.com/ingf/ingf.github.io/issues/2

(这是一篇攻城狮群的技术分享,作者尹锋)


以下是分享后的问答环节:

1、问:可以讲一下微信电影票(上一期分享内容)react 前端架构吗?

尹锋:先说一下微信演出票吧,因为微信电影票现在还不完全是 React 架构的,微信演出票是 React 的全家桶,使用的技术包括 React,Redux,react-router,首先它是一个单页应用,逻辑上面会分成好多个页面,比如首页、列表页、详情页、选做页、排期页等等。这个路由控制是通过 react-router 控制的。页面加载的 js 会分成两部分的 js,一部分的bundle 和 cmmon,另一部分是业务的 js,bundle就是所有的 lib 组成的 bundle,common是通过被引用超过五次以上就会达到 common 里面,剩下的全部会在业务 js 里面,所以当打开微信演出票的时候,第一次会加载三个js, bundle、common、当前页面业务上的 js, 然后每次加载另一个逻辑上面的页面的时候,就会加载那个页面所需要的一个 js 文件。

2、问:最大优势是组件化吗?

尹锋:对,组件化是非常大的一个优势。我们现在很多的业务,有电影票,有演出票,有 M 站,会有很多业务线,实际上我们现在在公司会有很多的组件复用。很多东西实现了一次以后,其他团队还会继续用。就像使用 html 标签一样,引入组件就可以了。

http://jsfiddle.net/69z2wepo/24153/

大家可以现在这个里面来写自己的 React 代码,熟悉了以后再来搭建整体开发框架。

3、问:刚才你说的 js 打包盒按需加载是如何做的?

尹锋:这里就是微信演出票全栈的所有页面,这些页面都会被单独打包成一个业务的 js,每次加载这个页面的时候就会去引用相应的 js,这个技术是用一个叫 react-proxy-loader 的插件来实现的。给大家发一下链接:

https://github.com/webpack/react-proxy-loader

4、问:有什么优秀的包含了基础架构的 BoilerPlate 或者其他好的组件?
尹锋:https://github.com/enaqx/awesome-react

5、问:bundle 是所有第三方的打包吗?common 是被引用五次以上的业务组件?
尹锋:
"vendor": ["react", "react-dom", 'react-router', 'react-router-redux', 'redux', 'redux-thunk', ]

webpack 认为一切都是模块,都可以被打包的。

参考链接:http://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin

6、问:那请问下把vendor和common分开的目的是什么?

尹锋:options.minChunks

vendor 主要 lib 库,是在太大了,更新比较低频。common 更新频率还是比较大的。为了最大限度的利用浏览器缓存,所以分成两个