为什么我要学习React

1 前言

React目前在前端的影响力就不多说了，不管你目前有没有入坑React，估计都见过不少各种相关的新闻和技术文章。如果你有入坑React的打算，或者刚开始学习React ，可以参考一下下面内容。如果你已是React达人，可以绕过（当然也很欢迎指出不足）。本文不是API文档，也不是代码搬运工，只是谈一下学习React的一些心得和Tips

2 入坑React的原因

前端的伙伴们都知道，我们的技术氛围十分活跃，要跟进所有新的技术，保持不落伍不是一件容易的事情。所以，我们必须把有限的学习精力花在能持续产生价值的事情上面。作为参考，我本人学习和使用React的原因有以下几点：

好多人都在搞啊，Facebook在维护啊，生态好啊，总不会那么容易过时吧（从众心理）

UI组件组织很爽，在开发时会不自觉地提取组件，再次开发时组织原有组件，效率高。

数据与UI解耦，单向数据流使逻辑清晰，告别jquery时代的混乱。

React的美好蓝图：跨端（React Native）和同构（Server Rending）。后台？终端APP？We can, we up!

业务里新项目已经使用，老项目准备切到React.（最有力的原因。。）

3 转换思维

之前使用Jquery开发和组织项目的同学，如果没有接触过类似mvvm的框架的，在入门React的时，有些思维方式需要转换一下。建议看一下React官方文档：Thinking in React

3.1 模块思维 => 组件思维

先说明一下模块和组件的区别：组件是具有规范接口的模块。说明完毕。模块是拆分应用的基本手段（使用如CommonJS, AMD等模块管理方案），而组件是将模块按照某个体系（组件体系）加以规范，同一体系中的组件可很方便地复用。

在使用React开发的时候，先把应用按层级拆分成组件（不只是模块）。不论组件后续是否能复用，必须也只能做成组件。当组件存在复用的可能时，就考虑把可复用的部分抽离成单独的组件。这会使你的应用层次非常分明，并且可复用性较高。

3.2 面向过程 => 面向数据

React提供了一套很好的UI机制，操作UI的途径是操作数据。所以，在一开始设计应用时，除了按层次拆分组件，下一件要做的事就是要设计应用需要的数据。数据同样也要护照层级设计，并对应到具体组件上。原来通过Jquery选择器操作Dom的方式直接摒弃，通过操作数据的方式改改变组件行为和展示。

初始化操作 => 设置初始化数据（传递props）

默认操作 => 设置默认数据（定义defaultProps ）

改变当前组件行为/展示 => 设置当前组件状态数据（this.setState）

改变其他组件行为/展示 => 执行上层组件的回调，由上导组件修改要改变的组件的数据（props）

3.3 事件循环 => 组件生命周期循环

Jquery组织的应用中，事件响应通常是业务逻辑的集中营。里面会分发和改变应用的各种状态与展示。在React中，应用的状态和行为由数据和组件来管控。以前关注的事件循环，现在只需要关注对应组件的生命周期就行了，可以在生命周期的各个切面里执行你想要的操作。

4 Tips

4.1 使用ES6

反正都要用babel编译jsx了，不妨顺应潮流，把ES6也编译了吧。

javascript是我们的饭碗，是时候提前适应一下升级版的饭碗了。

上上github，看下React相关的项目，你也不想一脸懵逼吧？

注意浏览器兼容性，有时候你可能需要pollifill。

4.2 props和state

props对于组件自己来说是常量，是父组件赋予给自己的，不要尝试要任何地方修改它（身体发肤，受之父母，不敢毁伤，孝之始也）。

state才是组件自己的个性，只和自己组件相关的数据可以放在这里，并且自己可以修改（你有你的个性，但请不要影响他人）。

应用太复杂，数据层级深？管理不易，使用Redux吧。

4.3 生命周期：反省自己的一生

学习组件生命周期的顺序和原理。

注意不要限入无限轮回。有的生命周期（componentWillUpdate）中设置数据可能会让你的组件进入渲染的死循环。什么？还是死循环了？看看你是不是用了什么Mixin或者高阶组件，它们有可能干涉你组件的生命周期。

shouldComponentUpdate 这个生命周期比较重要，性能优化集中在这里。

componentDidMount Server端的组件生命到此为止，后续再无。

4.4 好用的工具

classnames 让你免去拼接类名的烦恼

immutablejs 和Redux搭配效果不错，前提是你接受它的写法（必须通过get方法取属性值）

redux-thunk 如果你要用Redux，很可能就要用到它

原文来自：imweb