React.js 是 Facebook 推出的一个用来构建用户界面的 JavaScript 库。
译者按：近几个月React相关话题依旧火热，相信越来越多的开发者在尝试这样一项技术，我们团队也在PC和移动端不断总结经验。2016来了，这应该是React走向成熟的一年，不管你是新手，还是已经对React有所了解，是时候总结一下最佳实践了，让我们看看国外的开发者总结了哪些好的实践吧~
===========译文分割线==============
2015可以算是React之年了，关于其版本发布和开发者大会的话题遍布全球。关于去年React的发展里程碑详情，可以查看我们整理的。
2016年最有趣的问题可能是，我们该如何编写一个应用呢，有什么推荐的库或框架？
作为一个长时间使用React.js的开发者，我已经有自己的答案和最佳实践了，但你可能不会同意我说的所有点。我对你的想法和意见很感兴趣，请留言进行讨论。
如果你只是刚开始接触React.js，请阅读，或Pete Hunt的。
在React.js应用中处理数据超级简单的，但同时还是有些挑战。
这是因为你可以使用多种方式，来给一个React组件传递属性数据，从而构建出渲染树。但这种方式并不总是能明显地看出，你是否应该更新某些视图。
2015开始涌现出一批具有更强功能和响应式解决方案的Flux库，让我们一起看看：
根据我们的经验，Flux通常被过度使用了（就是大家在不需使用的场景下，还是使用了）。
Flux提供了一种清爽的方式存储和管理应用的状态，并在需要的时候触发渲染。
Flux对于那些应用的全局state（译者注：为了对应React中的state概念，本文将不对state进行翻译）特别有用，比如：管理登录用户的状态、路由状态，或是活跃账号状态。如果使用临时变量或者本地数据来处理这些状态，会非常让人头疼。
我们不建议使用Flux来管理路由相关的数据，比如/items/:itemId。应该只是获取它并存在组件的state中，这种情况下，它会在组件销毁时一起被销毁。
如果需要Flux的更多信息，建议阅读。
Redux是一个JavaScript&app的可预测state容器。
如果你觉得需要Flux或者相似的解决方案，你应该了解一下，并学习的，来强化你的开发技能。
Rudux发展了Flux的思想，同时降低了其复杂度。
扁平化state
API通常会返回嵌套的资源，这让Flux或Redux架构很难处理。我们推荐使用这类库来尽可能地扁平化state。
const data = normalize(response, arrayOf(schema.user))
state = _.merge(state, data.entities)
（我们使用与API进行通信）
使用immutable state
共享的可变数据是罪恶的根源&&Pete Hunt, React.js Conf 2015
是指在创建后不可再被修改的对象。
不可变对象可以减少那些让我们头痛的工作，并且通过引用级的比对检查来提升渲染性能。比如在shouldComponentUpdate中：
shouldComponentUpdate(nexProps) {
// 不进行对象的深度对比
return this.props.immutableFoo !== nexProps.immutableFoo
如何在JavaScript中实现不可变
比较麻烦的方式是，小心地编写下面的例子，总是需要使用（在变动前进行冻结，结束后验证结果）进行单元测试。
return arr1.concat(arr2)
相信我，这是最明显的例子了。
更简单自然的方式，就是使用。
import { fromJS } from 'immutable'
const state = fromJS({ bar: 'biz' })
const newState = foo.set('bar', 'baz')
Immutable.js非常快，其背后的思想也非常美妙。就算没准备使用它，还是推荐你去看看的视频，可以了解到它内部的实现原理。
Observables and reactive解决方案
如果你不喜欢Flux/Redux，或者想要更加reactive，不用失望！还有很多方案供你选择，这里是你可能需要的：
（&一个更清爽的reactive框架&）
（&Flux与Rxjs结合的产物&）
（&Redux的Rxjs工具库&）
（&可观测的数据，reactive的功能，简洁的代码&）
现在几乎所有app都有路由功能。如果你在浏览器中使用React.js，你将会接触到这个点，并为其选择一个库。
我们选择的是出自优秀社区的，这个社区总是能为React.js爱好者们带来高质量的资源。
要使用需要查看它的，但更重要的是：如果你使用Flux/Redux，我们推荐你将路由state与store或全局state保持同步。
同步路由state可以让Flux/Redux来控制路由行为，并让组件读取到路由信息。
Redux的用户可以使用来省点事儿。
代码分割，懒加载
只有一小部分webpack的用户知道，应用代码是可以分割成多个js包的。
require.ensure([], () =& {
const Profile = require('./Profile.js')
this.setState({
currentComponent: Profile
这对于大型应用十分有用，因为用户浏览器不用下载那些很少会使用到的代码，比如Profile页。
多js包会导致额外的HTTP请求数，但对于，完全不是问题。
与&结合可以优化缓存命中率。
下个版本的react-router将会对代码分隔做更多支持。
对于react-router的未来规划，可以去看博文:&。
很多人都在抱怨JSX，但首先要知道，它只是React中可选的一项能力。
最后，它们都会被Bable编译成JavaScript。你可以继续使用JavaScript编写代码，但是在处理HTML时使用JSX会感觉更自然。特别是对于那些不懂js的人，他们可以只修改HTML相关的部分。
JSX是一个类似于XML的JavaScript扩展，可以配合一个简单的语法编译工具来使用它。&&
如果你想了解更多JSX的内容，查看文章。
React中可以顺畅地使用ES2015的Class语法。
class HelloMessage ponent {
render() {
return &div&Hello {this.props.name}&/div&
}class HelloMessage ponent {
render() {
return &div&Hello {this.props.name}&/div&
我们在高阶组件和mixins之间更看重前者，所以抛弃createClass更像是一个语法问题，而不是技术问题。（译者注：在Class语法中，React组件的mixins方法将无法使用。）我们认为使用createClass和ponent没有对错之分。
属性类型（PropType）
如果你以前不检查props的类型，那么2016你应该开始改正了。它会帮你节省未来很多时间，相信我。
MyComponent.propTypes = {
isLoading: PropTypes.bool.isRequired,
items: ImmutablePropTypes.listOf(
ImmutablePropTypes.contains({
name: PropTypes.string.isRequired,
).isRequired
是的，同时也尽可能使用检查Immutable.js的props。
高阶组件（Higher order components）
，ES6的Class将不对其进行支持，我们需要寻找新的方法。
什么是高阶组件？
PassData({ foo: 'bar' })(MyComponent)
简单地，你创建一个从原生组件继承下来的组件，并且扩展了原始组件的行为。你可以在多种场景来使用它，比如鉴权：requireAuth({ role: &admin& })(MyComponent)（检查用户是否在高级组件中，如果还没有登录就进行跳转），或者将组件与Flux/Redux的store相连通。
在RisingStack，我们也喜欢分离数据拉取和controller类的逻辑到高阶组件中，这样可以尽可能地保持view层的简单。
好的代码覆盖测试是开发周期中的重要一环。幸运的是，React.js社区有很多这样的库来帮助我们。
我们最喜爱的组件测试库是AirBnb的。有了它的浅渲染特性，可以对组件的逻辑和渲染结果进行测试，非常棒对不对？它现在还不能替代selenium测试，但是将前端测试提升到了一个新高度。
it('simulates click events', () =& {
const onButtonClick = sinon.spy()
const wrapper = shallow(
&Foo onButtonClick={onButtonClick} /&
wrapper.find('button').simulate('click')
expect(onButtonClick.calledOnce).to.be.true
看起来很清爽，不是吗？
你使用chai来作为断言库吗？你会喜欢的。
测试一个reducer非常简单，它响应actions然后将原来的state转为新的state：
it('should set token', () =& {
const nextState = reducer(undefined, {
type: USER_SET_TOKEN,
token: 'my-token'
// immutable.js state output
expect(nextState.toJS()).to.be.eql({
token: 'my-token'
测试actions也很简单，但是异步actions就不一样了。测试异步的redux actions我们推荐，它能帮不少忙。
it('should dispatch action', (done) =& {
const getState = {}
const action = { type: 'ADD_TODO' }
const expectedActions = [action]
const store = mockStore(getState, expectedActions, done)
store.dispatch(action)
关于更深入的，请参考官方文档。
虽然React.js并不依赖代码构建工具，我们推荐和，它们都具有npm出色的能力。Npm有很多React.js的package，还可以帮助你优雅地管理依赖。
（请不要忘记复用你自己的组件，这是优化代码的绝佳方式。）
包大小（Bundle size）
这本身不是一个React相关的问题，但多数人都会对其React进行打包，所以我在这里提一下。
当你对源代码进行构建时，要保持对包大小的关注。要将其控制在最小体积，你需要思考如何require/import依赖。
查看下面的代码片段，有两种方式可以对输出产生重大影响：
import { concat, sortBy, map, sample } from 'lodash'
import concat from 'lodash/concat';
import sortBy from 'lodash/sortBy';
import map from 'lodash/map';
import sample from 'lodash/sample';
查看，获取更多详情。
我们喜欢将代码分隔到vendors.js和app.js，因为第三方代码的更新频率比我们自己带吗低很多。
对输出文件进行hash命名（WebPack中的chunk hash），并使用长缓存，我们可以显著地减少访问用户需要下载的代码。结合代码懒加载，优化效果可想而知。
如果你对WebPack还很陌生，可以去看超赞的。
组件级的hot reload
如果你曾使用livereload写过单页面应用，你可能知道当在处理一些与状态相关的事情，一点代码保存整个页面就刷新了，这种体验有多烦人。你需要逐步点击操作到刚才的环节，然后在这样的重复中奔溃。
在React开发中，是可以reload一个组件，同时保持它的state不变&&耶，从此无需苦恼！
搭建hot reload，可参考。
使用ES2015
前面提到过，在React.js中使用的JSX，最终会被进行编译。
Bable的能力还不止这些，它可以让我们在浏览器中放心地使用ES6/ES2015。在RisingStack，我们在服务器端和客户端都使用了ES2015的特性，ES2015已经可以在最新的LTS Node.js版本中使用了。
代码检查（Linters）
也许你已经对你的代码制定了代码规范，但是你知道React的各种代码规范吗？我们建议你选择一个代码规范，然后照着下面说的来做。
在RisingStack，我们强制将linters运行在持续集成（CI）系统，已经git push功能上。查看和。
我们使用标准的JavaScript代码风格，并使用来检查React.js代码。
（是的，我们已经不再使用分号了）
GraphQL和Relay
GraphQL和Relay是相关的新技术。在RisingStack，我们不在生产环境使用它们，暂时保持关注。
我们写了一个Relay的MongoDB ORM，叫做，可以使用你已有的mongoose models来创建GraphQL server。
如果你想学习这些新技术，我们建议你去看看这个库，然后写几个demo玩玩。
这些React.js最佳实践的核心点
有些优秀的技术和库其实跟React都没什么关系，关键在于要关注社区都在做些什么。2015这一年，React社区被启发了很多。
如果你知道其他2016年大家应该使用的React.js工具，请留言告诉我们。
Copyright &
All Rights Reserved &&&&&&您所在的位置： &
React Native-目前最火的前端技术
React Native-目前最火的前端技术
给产品经理讲技术
做为一名产品经理，你是否遇到过这样的窘境，“帮我把字体调成 16号呗，颜色变成 #FFFF00FF，老大说这里最好改一下”，作为一名 app 的开发只能无奈但心里窃喜的告诉你，“只能等下个版本了，必须要重新发布才能改”，如果你问为什么不能改了就生效啊，那说明你对技术的理解要么真的很差，要么你就是知道这项 React-Native 新技术所爆发出来的力量。
做为一名产品经理，你是否遇到过这样的窘境，&帮我把字体调成 16号呗，颜色变成 #FFFF00FF，老大说这里最好改一下&，作为一名 app 的开发只能无奈但心里窃喜的告诉你，&只能等下个版本了，必须要重新发布才能改&，如果你问为什么不能改了就生效啊，那说明你对技术的理解要么真的很差，要么你就是知道这项 React-Native 新技术所爆发出来的力量。
React Native 是 Facebook 推出的一个用 JavaScript 语言就能同时编写 ios，android，以及后台的一项技术，今年9月 发布了 android 版本，又在程序员里面掀起了一波小高潮，不断有喜欢尝鲜的程序员投入到这个领域。
用大白话说，就是从此一名程序员自己就可以创业了，他只用这一门技术，就可以同时写出 androidapp，ios app，以及后台应用程序，并且，请注意这里，它可以做到实时热更新（就像网页一样，改了一个字体，随时可上线），app 也能做到随时都能更新了，第一段讲的那个需求可以分分钟秒杀解决，不用新发版本，只需在服务器改动一下代码即可，是不是很牛逼，是不是很牛逼，是不是很牛逼，真的很牛逼。
到这里，你只需要理解一句话，就是 Facebook 提供了一套解决方案，它利用 JavaScript 作为开发语言，可以同时来编写前端，移动终端，后台应用程序。
我们再来讲讲，为什么 React Native 受到了如此大的关注，以及它的优越性到底在什么地方。
目前，一个成熟的互联网产品基本囊括了：移动终端和网页两种主要形态。在移动终端 app 和网页的开发历程中，涉及了很多技术角色：前端开发（俗名叫做网站的），移动终端开发（android 和 ios 开发，现在满大街都是），后台开发（他们的程序大多没有界面，主要是为网页和 app 提供数据和保障服务的稳定性），每个角色各司其职，分别需要不同的技能，比如前端开发需要精通 html，css，javascript 这些基本的 web 语言知识。Android 开发用 Java（这个词读 &扎瓦&，别读成了 &加瓦&，读成这样很 Low B 的）语言编写，ios 开发用 Objective-c（把他想象成当年过计算机二级的那个 C 语言就可以了）编写。后台开发，有的公司用 Java，有的公司用 C++，用啥的都有，能满足性能需要就可以了。
已经看崩溃了吧，对于一个非计算机专业的人，根本不会理解他妈的为什么要存在这么多语言，为什么这里要用 C 语言，那里要用 C++，有的地方要用 Python，而又有很大的一个人群对你高呼：&PHP 才是世界最好的语言&。其实他们每种语言都有不同的使用场景，有的语言效率高，有的语言语法更简洁漂亮，有的是专为后台而生，有的是特定场景下的唯一选择。如果你还听不懂，我们就用大白话做个比喻，为什么避孕套有的是螺纹的，有的是颗粒的，有的是延时的，有的是超薄的，还有一个品牌号称一只手就可以打开的，它们也都是依据个人身体状态，以及不同场景分别发挥各自的强项。你随便类比，任何一个领域，都有很多不同的工具来满足不同的场景，是需求决定了当前状态。
现在好了，React 整套解决方案完成了江湖统一，FaceBook 也号称这们技术是 &Learn Once，Write AnyWhere&，学习成本只有一次，却完成了所有开发角色的统一。
这意味着：
app 将来都是可像网页一样热更新，随时发布。
对于一名开发人员，将再也没有前端，终端，后台的区分，他所关注的就是做一整套应用程序，人力将得到最大幅度的整合与释放。
代码复用将会是主旋律，因为是一种语言，大家重复造轮子的成本会越来越节省。
目前，React Native 也还是有一些缺点的，比如他的 sdk 组件包 size 还比较大，crash 还比较多，在 ios 上支持的内容已经相当不错，android 还属于初级阶段，但是目前最新的版本也才是 0.16，相信再过一年， 一定会牛逼闪闪。
【编辑推荐】
【责任编辑： TEL：（010）】
关于&&的更多文章
Web Components是W3C定义的新标准，目前还处于草案阶段，但各大
既然强大的Android Studio来了，有什么理由不去用呢？
讲师： 6人学习过讲师： 17人学习过讲师： 1322人学习过
库克出柜了，为世界带来了别样的风景，虽说情理之中，
谷歌推出的Android操作系统，似乎与甜点结下了不解之
Android Wear自上市以来褒贬不一，使得谷歌公司成为可
本书分为4个部分共24章，以插件开发为中心，围绕插件开发主要介绍SWT/JFace的应用、插件扩展点的实现，以及GEF、EMF和RCP的相关
Windows Phone专家
Android开发专家
51CTO旗下网站Eclipse 教程
Eclipse 任务管理
在Eclipse中用TODO标签管理任务，利用这个功能可以方便地将项目中一些需要处理的任务记录下来。
我们可以在 Java 代码中的注释添加 TODO 单词来标记一个任务，任务可以通过 Tasks(任务) 视图查看。
在Eclipse中我们可以通过鼠标右击垂直标尺并选择 Add Task 菜单来添加任务，在弹出的对话框中输入任务描述信息：
如果需要删除任务，只需右击任务图标选择 Remove Task
菜单项即可：
打开 Task(任务) 视图
打开 Task(任务) 视图的方法为：
在 Window 菜单中选择 Show View & Other
在搜索框中输入 Tasks
在 General 下选择 Tasks
最后点击 OK 按钮
使用 Task(任务) 视图
Task(任务) 视图中显示了项目中所有待完成的任务：
Task(任务) 视图中还能进行以下操作：
修改任务右下角
标记任务已完成
删除任务或删除所有已完成任务React Native实战（一）：配置和起步
发表于 15:40|
作者廖祜秋
摘要：MDCC 2015平台与技术Android专场与会讲师——阿里巴巴工程师 廖祜秋以《React Native for Android》为主题，将在大会上深度分享React Native 下的 Android 开发，先行撰文对React Native进行实战，本文为第一篇。
10月14日-16日，由CSDN和创新工场联合主办的将在北京新云南皇冠假日酒店隆重召开，现在抢注大会门票，即享多重好礼！
Facebook开源React Native也势要统一移动端编程语言，而其提前发布React Native for Android更是引得国内外开发者一众热捧。MDCC
2015平台与技术Android专场与会讲师——阿里巴巴工程师 廖祜秋以《React Native for Android》为主题，将在大会上深度分享React
Native 下的 Android 开发，先行撰文对React Native进行实战，本文为第一篇。
图：阿里巴巴工程师 廖祜秋
以下为正文：
2015 年 9 月 15 号，React Native for Android 发布。至此，React 基本完成了对多端的支持。基于 React
/ React Native 可以：
HTML5、Android、iOS 多端代码复用；
实时热部署。
在接下来的时间，我会通过一系列文章来介绍 React Native。本文介绍环境配置以及如何建立一个简单的项目。（注：本篇文章 iOS 和
Android 开发都适用。）
目前使用 React Native 开发只能在 Mac 系统 上进行。写 iOS 的同学，应该都是 Mac （除了听说网易有些部门写 iOS
给黑苹果之外，哈哈哈哈）。 开发 Android 的同学, 如果公司配发的不是 Mac 的话，建议自己入手一个，能显著提高生产力，就当投资自己吧。我大阿里对
Android 开发也是不给 Mac 的（不知道公司什么思路，现在倒是可以申请 Mac air了，air的性能……），所以我也是自己买的。
需要安装的有：
Homebrew 是 Mac 中的一个包管理器。没有安装的话，点击
安装，我的版本如下：
mac-2:~ srain$ brew -v
Homebrew 0.9.5 (git revision ac9a7; last commit )
版本过低将会导致无法安装后续几个组件。可用 brew update 升级。
Node.js 需要 4.0 及其以上版本。安装好之后，npm 也有了。
安装 Node.js
nvm 是 Node.js 的版本管理器，可以轻松安装各个版本的 Node.js 版本。
安装 nvm 可以通过 Homebrew 安装：
brew install nvm
的方法安装。
然后安装 Node.js：
nvm install node && nvm alias default node
也可以直接下载安装 Node.js：
安装好之后，如下：
mac-2:react-native srain$ node -v
mac-2:react-native srain$ npm -v
这两个包分别是监控文件变化和类型检查的。安装如下：
brew install watchman
brew install flow
安装 React-Native
安装即可：
npm install -g react-native-cli
App开发环境的设置
XCode 6.3 及其以上即可。
这个比较麻烦。
设置环境变量：ANDROID_HOME
export ANDROID_HOME=/usr/local/opt/android-sdk
SDK Manager 安装以下包：
Android SDK Build-tools version 23.0.1
Android 6.0 (API 23)
Android Support Repository
初始化一个项目
文档提到：
react-native init AwesomeProject
初始化一个项目，其中 AwesomeProject 是项目名字，这个随意。等待一段时间之后（具体视网络情况而定），项目初始化完成。
进入到项目目录：
cd AwesomeProject
mac-2:AwesomeProject srain$ ls -l
drwxr-xr-x
476 Sep 21 09:52 android
-rw-r--r--
1023 Sep 21 11:47 index.android.js
-rw-r--r--
1065 Sep 20 11:58 index.ios.js
drwxr-xr-x
204 Sep 20 11:58 ios
drwxr-xr-x
170 Sep 21 10:31 node_modules
-rw-r--r--
209 Sep 20 11:58 package.json
其中 android 和 ios 中分别为两个平台的项目文件。index.android.js 和 index.ios.js 为两个页面对应的
不管是 iOS 还是 Android，在开发调试阶段，都需要在 Mac 上启动一个 HTTP 服务，称为“Debug Server”，默认运行在
8081 端口，APP 通 Debug Server 加载 js。
iOS 和 Android 的模拟器，连接 Mac 本机的服务都很方便。但是通过 USB 或者 WiFi 连接调试，就稍微麻烦一些了。
还是非常简单，XCode 打开项目，点击运行就好。修改 index.ios.js, 在模拟器中 ? + R 重新载入 js 即可看到相应的变化。
iOS 真机调试也简单，修改HTTP地址即可。
jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"];
按照官方文档，需要一个模拟器（Genymotion模拟器也可以）。但是不像 iOS，Android 开发平时更多是直接用真机进行开发和调试，如何运行部署到真机，下面会提到。
运行命令：
react-native run-android
然后就会部署到模拟器，修改 index.android.js ，调出模拟器菜单键，选择重新载入 js 即可看到变化。
Android 真机调试
示例 App 直接部署到真机，红色界面报错，无法连接到 Debug Server。
如果是 5.0 或者以上机型，可通过 adb 反向代理端口，将 Mac 端口反向代理到测试机上。
adb reverse tcp:8081 tcp:8081
如果 5.0 以下机器，应用安装到测试机上之后，摇动设备，在弹出菜单中选择 Dev Setting & Debug Server host
for device，然后填入 Mac 的 IP 地址（ifconfig 命令可查看本机 IP）
关于修改 DevHelper 来进行和 iOS 一样的开发调试，后续关于热部署时，我会介绍到。
在 Android Studio 中调试开发
我们可能希望在 Android Studio 打开项目，然后编译部署到真机。
这个时候，在命令行启动 Debug Server 即可：
react-native start
结论和后续
本篇文章，iOS 和 Android 都适用。至此，环境配置和示例项目运行应该都好了。后续我会继续发几篇文章介绍：
重点介绍 Android 相关的开发：包括组件，源码分析等；
动态热部署；
多端代码复用。
官方文档：
时间仓促，水平有限，如有谬误，还请纠正，原始文档在。
将于10月14日-16日在北京新云南皇冠假日酒店召开。大会特设九大技术专场：平台与技术（iOS）、平台与技术（Android）、平台与技术（跨平台）、产品与设计、游戏开发、企业移动化、虚拟现实专场、硬件开发与技术、嵌入式开发。大会将聚集国内最具实力的产品技术团队，与开发者一道进行最前沿的探讨与交流。&
第一时间掌握最新移动开发相关信息和技术，请关注mobilehub公众微信号（ID: mobilehub)。
推荐阅读相关主题：
CSDN官方微信
扫描二维码,向CSDN吐槽
微信号：CSDNnews
相关热门文章}