|
本文配图来自《复仇者联盟4》相关剧照。 开篇前，我们不妨先回顾下2018前端的重大事件，从而探究事件背后的技术趋势和热点话题，
随着框架和工程化的探索趋于稳定，如何更好的用，更简单的用？目前，各家大厂都在前端技术栈思考如何选型和降低成本，统一技术栈。同时，应用轻量化也成热点趋势，小程序成为最火技术，PWA进入稳定，从而引发“移动端跨平台性”的问题思考和热议。 （附：2019年大前端技术趋势深度解读：https://mp.weixin.qq.com/s/WWqsd-SnILUWbiKEnSArDQ） 数据表明：无React，不前端 根据《2018 年度JavaScript趋势报告》显示，目前React 在前端领域流行度最高， Vue 排名位居第二，但从“使用过并且将再次使用”的比例来看，Vue和React相比仍有不小差距。 （注：共有来自 153 个不同的国家共 20000 多名 JavaScript 开发者参与调查，中国共75个开发者占总数的 0.37%，中国也许这个数据会有一些不同） 往往大中型企业偏向于React，除Facebook，Instagram，Netflix，微软等众多国际知名互联网公司都是React.js的拥趸者外，国内很多主流互联网公司如腾讯、蚂蚁金服、京东、360、美团、携程等也在用 React ，即使有大厂由于业务等原因不直接使用，但仍没有脱离React社区。 React 是怎样炼成的？
本文引述部分内容，查看完整内容，请移步原文链接。 内容整理自 2014 年的 OSCON- React Architecture by vjeux，虽然从今天（2019）来看可能会有点历史感，但仍然值得学习了解。以史为鉴，从中也可以管窥Facebook 优秀的工程管理文化。 字符拼接时代 - 2004 时间回到 2004 年，Mark Zuckerberg 当时还在宿舍捣鼓最初版的 Facebook 。这一年，大家都在用 PHP 的字符串拼接（String Concatenation）功能来开发网站。 $str = '<ul>';foreach ($talks as $talk) { $str = '<li>' . $talk->name . '</li>';}$str = '</ul>';这种网站开发方式门槛低，安全性能差，容易造成 XSS 注入等问题。最简单的应对方法是对用户的任何输入都进行转义（Escape），但如果又不小心把HTML 标签（Markup）给转义了，那么 HTML 标签会直接显示给用户，从而导致很差的用户体验。 XHP时代- 2010 到了 2010 年，为了更加高效的编码，同时也避免转义 HTML 标签的错误，Facebook 开发了 XHP 。XHP 是对 PHP 的语法拓展，它允许开发者直接在 PHP 中使用HTML 标签，而不再使用字符串。
不久的后来，Facebook 的工程师又发现他们还可以创建自定义标签，而且通过组合自定义标签有助于构建大型应用。而这恰恰是 Semantic Web 和 Web Components 概念的一种实现方式。 $content = <talk:list />;foreach ($talks as $talk) { $content->appendChild(<talk talk={$talk} />);}之后，Facebook 在 JS 中尝试了更多的新技术方式以减小客户端和服务端之间的延时。比如跨浏览器 DOM 库和数据绑定，但是都不是很理想。 JSX- 2013 等到 2013 年，突然有一天，前端工程师 Jordan Walke 向他的经理提出了一个大胆的想法：把 XHP 的拓展功能迁移到 JS 中。 要想把 XHP 的拓展功能迁移到 JS ，首要任务是需要一个拓展来让 JS 支持 XML 语法，该拓展称为 JSX 。
React 自此，开始了 React 的万里长征，其中，最棘手的是如何再现 PHP 中的更新机制？ 在 PHP 中，每当有数据改变时，只需要跳到一个由 PHP 全新渲染的新页面即可。
虽然简单粗暴，但是这种方式的缺点也尤为突出，那就是它非常慢。 “You need to be right before being good”，意思是说，为了验证迁移方案的可行性，开发者必须快速实现一个可用版本，暂时不考虑性能问题。 取自于 PHP 的灵感，引入js，于是，问题最终转化为，如何实现了对 DOM 节点的版本控制？如何对React 进行持续性优化？ 这个时候 Facebook 做了个重大的决定，那就是把 React 开源！ React的学习路径——从菜鸟到大牛
如果你想开始学习React又不知道该从何学起的话，你不妨看看本文。当然，要学习React，你必须具备基本的HTML、CSS和JavaScript的知识，如果你之前从未接触过前端开发，那么我建议你先学习基础知识。 “凭什么听你的？” React教程那么多，为什么要听听我的建议呢？我曾是Facebook团队的一员并参与创建和开源React，对React有着较深的理解。现在我已经出来创业，因此我同时还有着不同于Facebook的一些观点。 如果看待React的生态？ 每个软件都是基于一个技术栈来实现的，因此如果想要创建你自己的应用，你就必须充分理解自己的技术栈。React的生态看上去很复杂的原因便是人们通常没有按照正确的顺序来去学习。 你需要按照下面的顺序一步一步地学习，不要跳着学或者同时学习多个内容，否则你会感到非常混乱。 基本内容：
当然，并不是要把这些内容全部学完你才能开始使用React，你完全可以先学一步并着手做一点东西，当你发现这一步的知识不足以解决你现在遇到的问题时你再开始下一步的学习。 下面我会一一介绍每一个技术的学习要领，大家根据自己的需要来看就好。 基础部分 1.学习React 开始学习React并不需要大量的准备工作。在官网的文档里你可以发现一个可以直接复制的HTML模板，将它粘贴到你的本地html文件中就可以开始学习啦。在这一步你不要去管什么工具，你只需要理解React的基础知识就好，当你熟悉了基础知识之后再去学习各种工具的用法。 2.学习npm npm是Node.js的包管理工具，也是目前前端开发者和设计师们共享代码的最热门的工具。它集成了一个模块系统CommonJS，可以让开发者安装一些命令行工具。建议大家看看 文章来了解一下为什么CommonJS对于浏览器来说是必要的（原文：https:///2013/01/22/commonjs-why-and-how/），如果想进一步了解CommonJS的API的话可以看看 这篇（原文：http://wiki./wiki/Introduction）。 3.学习JavaScript打包工具 出于一些技术的原因，浏览器并不原生支持CommonJS模块。你需要一个JavaScript打包工具来将这些模块打包成一个.js文件，在网页中引入这个打包后的文件就可以在浏览器中运行了。 典型的打包工具有Webpack和browerify。二者都是个不错的选择，但是我更推荐Webpack，因为它具备很多简化大型项目开发的特性。由于Webpack的文档比较晦涩难懂，我针对React设计了一个 Webpack模板 （地址：https://github.com/petehunt/react-webpack-template），如果你想进一步了解Webpack的进阶用法的话，你可以看看 这篇 文章（原文：https://github.com/petehunt/webpack-howto）。 有一个误区需要避免：CommonJS利用require()方法来加载模块，因此很多人会下意识地认为他们需要一个require.js来完成这项工作。事实上由于一些技术上的问题我并不推荐你使用require.js，更何况不引入这个库你也可以使用require()方法。 4.学习ES6 除了JSX（你在React基础部分会学到）以外，你会在React的示例中看到一些陌生的符号。它们便是ES6（ECMAScript第6版，JavaScript最新的语法标准）的新语法，在你学习基础JavaScript的时候不曾遇到过。由于它太新了（2015年颁布），因此还没有得到很好地浏览器支持，但是你的打包工具可以在打包的同时将ES6转成ES5的语法以获得更好的浏览器支持。 当然，使用React不代表一定要使用ES6，你大可以跳过ES6，将重点放在React本身。但是ES6的一些概念解决了很多以往JavaScript的语法问题，建议不打算学习ES6的朋友有精力的时候也了解一下。 强调一点：有些人会推荐你用ES6中新的类来定义React组件，而我建议你不要这么做。事实上多数人（包括Facebook的开发者）在创建React组件时使用的是React.createClass()方法。 5.学习路由 单页应用是当今的主流。单页的应用只加载一次网页，当用户点击链接或按钮的时候，JavaScript代码会更新页面的内容和地址栏内容，但是网页并没有刷新。地址栏的管理器就被称为路由。React的生态中最受欢迎的且最好用的路由是react-router，创建单页应用的朋友一定要尝试一下。 6.学习Flux 你可能听说过Flux，而且很多关于Flux的误解你可能也听说过。 很多人在创建应用的使用需要定义一个数据模型，然后他们认为他们需要Flux来实现它。 这不是Flux的正确使用方法 。Flux应该在很多组件加载之后加载。 React组件通常会构成一个层级结构。多数情况下，你项目的数据模型也需要构成一个层级结构。这时Flux并不适合你的项目。然而有时候你的数据模型并没有构成层级关系。当你的React组件开始接收无关联的props值，或者你的一些组件开始变得非常复杂的时候，你可能才需要使用Flux。 你会清楚你什么时候需要Flux的。如果你不确定你是否需要使用它，那就不要用。 如果你确定需要使用Flux的话，那么我建议你使用目前最受欢迎且文档齐全的Flux库——Redux。当然Flux的框架不止这一个，但是我建议大家去用最热门的那一个。 以上便是React技术栈中的基础部分，大部分开发者了解到这一步就可以了。如果你已经熟悉了React的用法并有了一定的项目经验，你可以接着学习下面这些进阶技术。 进阶部分 1.学习内联样式 在React诞生之前，很多开发者通过SASS这样的预编译器来重用非常复杂的样式表。因为React简化了重用组件的方法，因此你的样式表也可以被简化了。社区里的很多人（包括我）甚至都开始尝试不写样式表。这是一个非常疯狂的想法，它使得媒体查询变得复杂，而且还会对性能产生潜在的影响。因此，建议各位刚接触React的时候， 用你最常用的方法来编写样式 。 如果你已经习惯了React的用法，你可以尝试使用其他技术来写样式。最热门的技术便是 BEM（地址：https://en./）。逐步放弃使用那些CSS预编译器吧，React给你提供了一个更加强大的方法来重用样式，你的JavaScript打包工具会生成更加高效的样式表。 你也可以尝试一下CSS模块，如 react-css-modules（地址：https://github.com/gajus/react-css-modules） 。你仍可以编写纯CSS或SASS/LESS/Stylus，但是你可以像React的内联样式那样管理、组织你的CSS文件。你不需要像BEM那样再为管理类的名称而费心，因为模块系统都帮你完成了。 2.学习服务端渲染 服务器渲染通常又称为“全局”或“同构”JS，是指将React组件在服务端渲染成静态HTML文件。这会加快首次加载的速度，因为用户不需要等待浏览器下载JS即可看到初始的UI，而且React可以重用服务端渲染的HTML，因此不需要在客户端创建。 如果你发现你的首次渲染速度太慢或者你想提升你的搜索引擎排名的话，你可以尝试一下服务端渲染。尽管谷歌以客户端渲染的内容为索引，但是在2016年1月份开发者通过实际测试发现：由于客户端渲染有潜在的性能问题，它对排名是有负面影响的。 要想正确使用服务端渲染还需要很多工具。即便你在编写时没有考虑到服务端渲染的问题，它也可以很好地支持React组件。因此你应该先创建好你的应用，之后再考虑服务端渲染的问题。你不需要为了支持服务端渲染而去把你的所有组件重写一遍。 3.学习Immutable.js Immutable.js（查看：https://immutable-js./immutable-js/） 提供了很多可以解决React性能问题的数据结构。如果你想改进你的应用的性能，你不妨尝试一下它。 4.学习Relay和Falcor 这些技术可以帮助你减少AJAX请求的次数。它们是非常前沿的技术，如果你的AJAX请求并不是很多，那么你就不需要使用它们。 结语 说了这么多，你可能还是会觉得要学的东西好多。为什么说你的技术储备是一个技术栈？因为你会根据需要不断地去push进去新的东西。这个push的过程不是无脑的。优先将基础的东西push进去并不断消化。当你的技术栈的基础稳固了，出现了更多的需要时，再去push新的东西。如果一股脑的没有顺序的push进太多东西，你的技术栈会瞬间崩塌，你也会变得不知所措。 因此，记住一点：根据你的需要来学习，从基础开始。 几个必看的React开源项目
1.Facebook’s F8 Conference App 项目地址 https://github.com/fbsamples/f8app 2.Reading 来自饿了么RN大神开源的reading项目,已经完成Android和iOS双适配。绝对是一个产品级的开源项目，并且作者还在持续的更新。值得一荐！ 项目地址: https://github.com/attentiveness/reading 3.Weather 该为国外一个天气预报客户端,界面效果简约优美，作者借鉴F8项目同时客户端数据来自真实国外的天气预报API。这天气预报客户端体验估计已经给原生开发者造成10000点伤害了。 项目地址: https://github.com/stage88/react-weather 4.GithubFeed 该项目来自阿里开发人员,你的又一Github客户端哦~项目github也超过了1000个star。 项目地址： https://github.com/xiekw2010/react-native-gitfeed 5.React-Native-NBA-App 这个项目主要进行查看NBA相关数据,界面做的非常Nice，项目整体架构也非常不错,关键还有图表界面，同时适配Android和iOS双平台。也是大家不可多得学习的项目。推荐！ 项目地址: https://github.com/wwayne/react-native-nba-app 6.HackerNews 采用纯React Native开发的HackerNews客户端,同时兼容Android、iOS双平台。用到很多常用的开源组件，而且非常适合初学者入门的项目。有借鉴意义。 项目地址: https://github.com/iSimar/HackerNews-React-Native 7.iShiWuPai iShiWuPai是基于React Native和Redux实现的展示型美食类APP。不过当前暂时只适配iOS版本,但是效果绝对赞了~ 项目地址: https://github.com/ljunb/react-native-iShiWuPai 8.HiApp 采用React Native开发的一款基于类似微博以及聊天App,同时兼容Android、iOS双平台,甚至还有Web端。整体功能有很多可以学习的地方。例如效果布局,多语言切换等等。 项目地址: https://github.com/BelinChung/react-native-hiapp 写到最后 本文，我们从React的产生聊到学习路径/项目实践，从底层讲到应用。那么，如何结合实际工程环境，利用现有的React 和js知识，开发和部署出功能完备的原生APP? 这里推荐一本邦尼·艾森曼（Twitter工程师）的《React Native开发指南（第2版）》 扫一扫，京东购 ●Twitter工程师经验总结 本书是一本实践指南，从基础知识入手，逐步深入，带领读者部署可100%代码复用的、成熟的跨平台移动应用。除了框架本身的讲解，作者还探讨了如何使用第三方库，以及如何编写自己的Java或者Objective-C的React Native扩展。第2版新增了部分章节及附录，讨论了如何在跨平台组件中实现特定平台的代码，通过Redux库来管理状态，以及对React Native初学者更友好的Expo应用。 结合应用轻量化趋势，如小程序技术，PWA，谈谈你对“移动端跨平台性问题”的思考和理解？ 精选留言获赞前3名，同时，随机抽取2位同学各送一本《React Native开发指南（第2版）》！ 活动截止2019.5.17 图灵社区 读好书，让代码更高效！ 技术|交流|图书|社群 |
|
|
来自： Earlycl6i7o9ek > 《技术》
