平安科技移动开发二队技术周报（特别版のReact Native专题）

bger 9年前

@author ASCE1885的 Github 简书微博 CSDN

随着React Native For Android的发布，React Native俨然已经成为移动开发的一个热门技术选型，本期周报简单总结使用React Native进行开发所需要的技术储备，入门React Native开发。

深入浅出 ES6 系列

ECMAScript 6已经正式发布了，作为它最重要的方言，Javascript也即将迎来语法上的重大变革，本系列文章就来看一下ES6将给我们带来哪些新内容。

深入浅出 React 系列

1）React的设计哲学 - 简单之美

React最初来自非死book内部的广告系统项目，项目实施过程中前端开发遇到了巨大挑战，代码变得越来越臃肿且混乱不堪，难以维护。于是痛定思痛，他们决定抛开很多所谓的“最佳实践”，重新思考前端界面的构建方式，于是就有了React。

本文主要了解一下用于React开发和模块管理的主流工具Webpack。称之为React开发神器有点标题党了，不过Webpack确实是笔者见过的功能最为强大的前端模块管理和打包工具。虽然Webpack是一个通用的工具，并不只适合于React，但是很多React的文章或者项目都使用了 Webpack，尤其是react-hot-loader这样的神器存在，让Webpack成为最主流的React开发工具。

3）理解JSX和组件

JSX这种混合使用JavaScript和XML的语言第一眼看上去很“丑”，也很神奇，但是其语法和背后的逻辑却极其简单。相信读完本文你就可以对JSX和组件有一个全面的了解，并能够用JSX来直观的构造用户界面。

4）虚拟DOM Diff算法解析

React中最神奇的部分莫过于虚拟DOM，以及其高效的Diff算法。这让我们可以无需担心性能问题而”毫无顾忌”的随时“刷新”整个页面，由虚拟DOM来确保只对界面上真正变化的部分进行实际的DOM操作。React在这一部分已经做到足够透明，在实际开发中我们基本无需关心虚拟DOM是如何运作的。然而，作为有态度的程序员，我们总是对技术背后的原理充满着好奇。理解其运行机制不仅有助于更好的理解React组件的生命周期，而且对于进一步优化React程序也会有很大帮助。

React Native 探索系列

1）背景、规划和风险

React Native项目成员Tom Occhino发表的React Native: Bringing modern web techniques to mobile详细描述了React Native的设计理念。Occhino认为尽管Native开发成本更高，但现阶段Native仍然是必须的，因为Web的用户体验仍无法超越 Native。

2）布局篇

布局篇主要讲解了react布局的宽度，flex布局，图片布局，定位和文本元素等。

3）与 react-web 的融合

对于react-native在实际中的应用，非死book官方的说法是react-native是为多平台提供共同的开发方式，而不是说一份代码，多处使用。然后一份代码能够多处使用还是很有意义的。

Flex 布局教程

1）语法篇

布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

2）实例篇

上一篇文章介绍了Flex布局的语法，今天介绍常见布局的Flex写法。你会看到，不管是什么布局，Flex往往都可以几行命令搞定。

汇总

1）React-Native入门指南

React Native入门的系列教程，主要针对iOS版本。

2）React-Native学习指南

本指南汇集React-Native各类学习资源，给大家提供便利。

3）Awesome React Native

另外一个React Native资源的汇总

4）读读日报：React Native（Android & iOS）

读读日报上面对React Native相关文章的专题。

文末摄影鉴赏