译者按：近几个月React相关话题依旧火热，相信越来越多的开发者在尝试这样一项技术，我们团队也在PC和移动端不断总结经验。2016来了，这应该是React走向成熟的一年，不管你是新手，还是已经对React有所了解，是时候总结一下最佳实践了，让我们看看国外的开发者总结了哪些好的实践吧~
===========译文分割线==============
2015可以算是React之年了，关于其版本发布和开发者大会的话题遍布全球。关于去年React的发展里程碑详情，可以查看我们整理的React 2015这一年。
2016年最有趣的问题可能是，我们该如何编写一个应用呢，有什么推荐的库或框架？
作为一个长时间使用React.js的开发者，我已经有自己的答案和最佳实践了，但你可能不会同意我说的所有点。我对你的想法和意见很感兴趣，请留言进行讨论。
如果你只是刚开始接触React.js，请阅读React.js教程，或Pete Hunt的React howto。
数据处理
在React.js应用中处理数据超级简单的，但同时还是有些挑战。
这是因为你可以使用多种方式，来给一个React组件传递属性数据，从而构建出渲染树。但这种方式并不总是能明显地看出，你是否应该更新某些视图。
2015开始涌现出一批具有更强功能和响应式解决方案的Flux库，让我们一起看看：
Flux
根据我们的经验，Flux通常被过度使用了（就是大家在不需使用的场景下，还是使用了）。
Flux提供了一种清爽的方式存储和管理应用的状态，并在需要的时候触发渲染。
Flux对于那些应用的全局state（译者注：为了对应React中的state概念，本文将不对state进行翻译）特别有用，比如：管理登录用户的状态、路由状态，或是活跃账号状态。如果使用临时变量或者本地数据来处理这些状态，会非常让人头疼。
我们不建议使用Flux来管理路由相关的数据，比如/items/:itemId。应该只是获取它并存在组件的state中，这种情况下，它会在组件销毁时一起被销毁。
如果需要Flux的更多信息，建议阅读The Evolution of Flux Frameworks。
使用Redux
Redux是一个JavaScript app的可预测state容器。
如果你觉得需要Flux或者相似的解决方案，你应该了解一下redux，并学习Dan Abramov的redux入门指南，来强化你的开发技能。
Rudux发展了Flux的思想，同时降低了其复杂度。
扁平化state
API通常会返回嵌套的资源，这让Flux或Redux架构很难处理。我们推荐使用normalizr这类库来尽可能地扁平化state。
像这样：
|
1 2 3 |
const data = normalize(response, arrayOf(schema.user)) state = _.merge(state, data.entities) |
（我们使用isomorphic-fetch与API进行通信）
使用immutable state
共享的可变数据是罪恶的根源——Pete Hunt, React.js Conf 2015
不可变对象是指在创建后不可再被修改的对象。
不可变对象可以减少那些让我们头痛的工作，并且通过引用级的比对检查来提升渲染性能。比如在shouldComponentUpdate中：
|
1 2 3 4 |
shouldComponentUpdate(nexProps) { // 不进行对象的深度对比 return this.props.immutableFoo !== nexProps.immutableFoo } |
如何在JavaScript中实现不可变
比较麻烦的方式是，小心地编写下面的例子，总是需要使用deep-freeze-node（在变动前进行冻结，结束后验证结果）进行单元测试。
|
1 2 3 4 5 6 |
return { ...state, foo } return arr1.concat(arr2) |
相信我，这是最明显的例子了。
更简单自然的方式，就是使用Immutable.js。
|
1 2 3 4 |
import { fromJS } from 'immutable' const state = fromJS({ bar: 'biz' }) const newState = foo.set('bar', 'baz') |
Immutable.js非常快，其背后的思想也非常美妙。就算没准备使用它，还是推荐你去看看Lee Byron的视频Immutable Data and React，可以了解到它内部的实现原理。
Observables and reactive解决方案
如果你不喜欢Flux/Redux，或者想要更加reactive，不用失望！还有很多方案供你选择，这里是你可能需要的：
- cycle.js（“一个更清爽的reactive框架”）
- rx-flux（“Flux与Rxjs结合的产物”）
- redux-rx（“Redux的Rxjs工具库”）
- mobservable（“可观测的数据，reactive的功能，简洁的代码”）
路由
现在几乎所有app都有路由功能。如果你在浏览器中使用React.js，你将会接触到这个点，并为其选择一个库。
我们选择的是出自优秀rackt社区的react-router，这个社区总是能为React.js爱好者们带来高质量的资源。
要使用react-router需要查看它的文档，但更重要的是：如果你使用Flux/Redux，我们推荐你将路由state与store或全局state保持同步。
同步路由state可以让Flux/Redux来控制路由行为，并让组件读取到路由信息。
Redux的用户可以使用redux-simple-router来省点事儿。
代码分割，懒加载
只有一小部分webpack的用户知道，应用代码是可以分割成多个js包的。
|
1 2 3 4 5 6 |
require.ensure([], () => { const Profile = require('./Profile.js') this.setState({ currentComponent: Profile }) }) |
这对于大型应用十分有用，因为用户浏览器不用下载那些很少会使用到的代码，比如Profile页。
多js包会导致额外的HTTP请求数，但对于HTTP/2的多路复用，完全不是问题。
与chunk hashing 结合可以优化缓存命中率。
下个版本的react-router将会对代码分隔做更多支持。
对于react-router的未来规划，可以去看博文Ryan Florence: Welcome to Future of Web Application Delivery。
组件
很多人都在抱怨JSX，但首先要知道，它只是React中可选的一项能力。
最后，它们都会被Bable编译成JavaScript。你可以继续使用JavaScript编写代码，但是在处理HTML时使用JSX会感觉更自然。特别是对于那些不懂js的人，他们可以只修改HTML相关的部分。
JSX是一个类似于XML的JavaScript扩展，可以配合一个简单的语法编译工具来使用它。——深入浅出JSX
如果你想了解更多JSX的内容，查看文章JSX Looks Like An Abomination – But it’s Good for You。
使用类
React中可以顺畅地使用ES2015的Class语法。
|
1 2 3 4 5 6 7 8 9 |
class HelloMessage extends React.Component { render() { return <div>Hello {this.props.name}</div> } }class HelloMessage extendspan>> } }class HelloMessage extends成熟的一年，不管你是新手，还是已经对React有所了解，是时候总结一下最佳实践了，让我们看看国外的开发者总结了哪些好的实践吧~
===========译文分割线============== 2015可以算是React之年了，关于其版本发布和开发者大会的话题遍布全球。关于去年React的发展里程碑详情，可以查看我们整理的React 2015这一年。 2016年最有趣的问题可能是，我们该如何编写一个应用呢，有什么推荐的库或框架？
如果你只是刚开始接触React.js，请阅读React.js教程，或Pete Hunt的React howto。
数据处理在React.js应用中处理数据超级简单的，但同时还是有些挑战。 这是因为你可以使用多种方式，来给一个React组件传递属性数据，从而构建出渲染树。但这种方式并不总是能明显地看出，你是否应该更新某些视图。 2015开始涌现出一批具有更强功能和响应式解决方案的Flux库，让我们一起看看： Flux根据我们的经验，Flux通常被过度使用了（就是大家在不需使用的场景下，还是使用了）。 Flux提供了一种清爽的方式存储和管理应用的状态，并在需要的时候触发渲染。 Flux对于那些应用的全局state（译者注：为了对应React中的state概念，本文将不对state进行翻译）特别有用，比如：管理登录用户的状态、路由状态，或是活跃账号状态。如果使用临时变量或者本地数据来处理这些状态，会非常让人头疼。 我们不建议使用Flux来管理路由相关的数据，比如/items/:itemId。应该只是获取它并存在组件的state中，这种情况下，它会在组件销毁时一起被销毁。 如果需要Flux的更多信息，建议阅读The Evolution of Flux Frameworks。 使用ReduxRedux是一个JavaScript app的可预测state容器。 如果你觉得需要Flux或者相似的解决方案，你应该了解一下redux，并学习Dan Abramov的redux入门指南，来强化你的开发技能。 Rudux发展了Flux的思想，同时降低了其复杂度。 扁平化stateAPI通常会返回嵌套的资源，这让Flux或Redux架构很难处理。我们推荐使用normalizr这类库来尽可能地扁平化state。 像这样：
（我们使用isomorphic-fetch与API进行通信） 使用immutable state共享的可变数据是罪恶的根源——Pete Hunt, React.js Conf 2015
不可变对象是指在创建后不可再被修改的对象。 不可变对象可以减少那些让我们头痛的工作，并且通过引用级的比对检查来提升渲染性能。比如在shouldComponentUpdate中：
如何在JavaScript中实现不可变比较麻烦的方式是，小心地编写下面的例子，总是需要使用deep-freeze-node（在变动前进行冻结，结束后验证结果）进行单元测试。
相信我，这是最明显的例子了。 更简单自然的方式，就是使用Immutable.js。
Immutable.js非常快，其背后的思想也非常美妙。就算没准备使用它，还是推荐你去看看Lee Byron的视频Immutable Data and React，可以了解到它内部的实现原理。 Observables and reactive解决方案如果你不喜欢Flux/Redux，或者想要更加reactive，不用失望！还有很多方案供你选择，这里是你可能需要的：
路由现在几乎所有app都有路由功能。如果你在浏览器中使用React.js，你将会接触到这个点，并为其选择一个库。 我们选择的是出自优秀rackt社区的react-router，这个社区总是能为React.js爱好者们带来高质量的资源。 要使用react-router需要查看它的文档，但更重要的是：如果你使用Flux/Redux，我们推荐你将路由state与store或全局state保持同步。 同步路由state可以让Flux/Redux来控制路由行为，并让组件读取到路由信息。 Redux的用户可以使用redux-simple-router来省点事儿。 代码分割，懒加载只有一小部分webpack的用户知道，应用代码是可以分割成多个js包的。
这对于大型应用十分有用，因为用户浏览器不用下载那些很少会使用到的代码，比如Profile页。 多js包会导致额外的HTTP请求数，但对于HTTP/2的多路复用，完全不是问题。 与chunk hashing 结合可以优化缓存命中率。 下个版本的react-router将会对代码分隔做更多支持。 对于react-router的未来规划，可以去看博文Ryan Florence: Welcome to Future of Web Application Delivery。 组件很多人都在抱怨JSX，但首先要知道，它只是React中可选的一项能力。 最后，它们都会被Bable编译成JavaScript。你可以继续使用JavaScript编写代码，但是在处理HTML时使用JSX会感觉更自然。特别是对于那些不懂js的人，他们可以只修改HTML相关的部分。
如果你想了解更多JSX的内容，查看文章JSX Looks Like An Abomination – But it’s Good for You。 使用类React中可以顺畅地使用ES2015的Class语法。
|
