使用react开发的优秀实践
November 15, 2017
如果想用react开发功能丰富，易于代码管理，易于扩展维护的项目，我们最好使用react的一整个体系。当然你单独使用react的部分也是可以的，写一些简单的应用也非常方便，没有必要把这个体系用上。
这篇文章作为入门的一篇略深一些的介绍，在全面学习之前我们至少要知道我们学的每个部分是做什么，为什么要在这里用这个。所以本文不讲一些代码的细节，而是从整体上把握这个技术栈，帮助你快速理解整个体系。
总结 #
一个比较好的实践是使用: react + redux + router, 来实现复杂的应用。 其中， react 承担了前端渲染控制的功能，redux承担了数据流转的控制功能，router则实现了路由控制的功能。
这三项，基本上可以保证我们做出的项目，结构清晰，易于维护。 在初学这写东西的时候，可能会觉得比较痛苦，因为你需要记住太多的东西和条条框框来开发，这好像限制了你的自由发挥，但是对于一个大型应用来说，或者即便是小应用，没有清晰的结构，就连你自己可能都看不懂自己的代码，后期维护的时候就基本上没有多少好体验了。
真正优秀的作品，都是在严格的限制下完成的，因为人的思维不应该去思考那些复杂的页面组成的逻辑关系，而是在实现自己的业务逻辑和计算算法上，那些结构，按照一个科学的方式来做就好。而react正是提供了这样一个科学的流程和方式。
react #
总的来说，在前端渲染方面，react非常出众， 一般我们将前端渲染的部分交给react来做。 react使用虚拟DOM的方式，来管理渲染。并且将一个页面分成多个组件进行管理，我们一般将组件按功能分开。当页面发生变化的时候，由react来决定哪里需要渲染，哪里不动，react来操纵浏览器的渲染。 与jQuery相比，更进一步， jQuery是将浏览器的一些操作封装出来，提供一组新的调用函数。但是react已经将浏览器的相关接口完全封装，并且屏蔽在react内部，提供了一种更自然和智能的方式来满足我们的需求。我们直接和react打交道，剩余的事情由react去和浏览器做。
react这个框架可以运行在浏览器端，也可以运行在服务器端， 我们称之为Universal渲染，这里的服务器端，就是Nodejs的平台了。我用的基本上都是浏览器端运行。只要将react的脚本发送到浏览器进行执行就可以了。 初的渲染是后端的事情，有了ajax后前端也可以进行渲染了。但是前端渲染会有个问题，就是搜索引擎不友好，因为搜索引擎并不会去跟js代码交互，只会爬取静态页面，所以使用后端渲染十分重要。这关乎你的网站被检索到的可能性。
基本构造 #
react的逻辑很简单，一切都是组件。一个页面是由多个组件堆砌而成，每个组件之间互相隔离，仅通过数据交互，而数据交互的接口是固定的。所以对于一个组件内部来说，与外界是完全隔离的。 一个组件包括，样式和数据。数据我们通过请求服务器去获得。 每个组件通过提供一个render函数来返回这个组件，这个render函数只能返回一个元素。如果有多个元素需要被包起来成为一个元素返回。 组件之间可以是嵌套关系，这个和类的概念有点像，在一个类中可以包含另一个类作为自己的成员。也就是方便我们做组件封装，功能划分。
当我们写完一个react应用后，可以通过npm start的方式启动起来，当我们在浏览器访问对应的地址时，默认访问index.js, 所以我们的应用最终在这里组织起来。
ES6 & Javascript & JSX #
在写应用的时候，我们使用JSX 语法来写，JSX以ES6为基础，react提供了JSX解释器。在写完以后，JSX语法的代码会被编译成JS代码，最终在浏览器中运行的是Javascript的代码，关于webpack等工具，我暂时没有去学习，因为react提供了一个创建react应用的脚本，能够一键创建好这些配置文件，所以我就暂时直接使用了。
npm install --global create-react-app
这个命令就可以安装这个脚本，然后我们执行： create-react-app myapp, 就可以创建一个文件夹， 里面已经配置了一个简单的react应用。
然后我们进入这个文件夹，使用npm start就可以启动服务。 start的过程中，代码就会被编译，并打包成webpack中配置的打包形式。
如果此时我们改变代码，这个页面会动态更新。
react 原生的数据控制 #
在react中，数据主要有三个载体，分别是state、prop、context。其中state是组件内部状态数据，prop用于层层传递，context可以跨层传递。
react要实现各个组件独立，并且具有统一的结构，最重要的就是控制数据。在JS这种弱类型的语言中，这一点很好实现，重点就是设计一个接口形式。 react中的组件，都有两个变量，一个是prop， 一个是state。 其中，state是描述组件内部数据的，prop是对外的接口。也就是说，别人传过来的数据，会存在prop中。同时，prop是不可变的，组件自己不能更改prop的值， 只能改变state的值。
这种数据控制的方式，比较原始，从接口统一的角度来看挺好的，也符合基本的思维方式。 但是这种控制方式也存在很多问题，不用去深究这个框架的细节，我们也可以提出很多问题：
- 每个组件之间的数据冗余问题，很多数据统计的模块，该怎么存储数据？
复制一份出来？当要更改数据的时候，是不是还要传参给另一个组件通知他改变数据？
因此这样的数据控制肯定会让程序员自己想办法去解决，这样的解决方式很多，所以就会出现大家都用react，但是写出来的东西互相看不太懂。redux就是在这样的情况下，提供了一个统一的方式。
redux #
redux 对于数据做了如下的限制：
- 数据源唯一
- 状态只读
- 数据改变只能通过纯函数完成
数据源唯一 唯一的数据源，是指所有的数据都存在一个地方Store，由redux做分发，这个数据呈树形分布。 状态只读 状态不能被更改，你需要有个接口，来返回新的数据，redux会自己将数据覆盖上去。 只能通过纯函数该变数据 所谓的纯函数就是指函数的输出完全取决于输入，没有其他的因素。
在redux的限制下，在我们的流程中，需要多几个部分，来实现这个流程。
Store #
这就是存放数据的地方，这是一个类。 其是数据中心，同样，也应该是各个部分联系的中，应用的变化，就体现在数据的变化上，所以store将其余的部分连接在一起了。
一个Store中，定义了能够更新其数据的reducer，数据的初始值， 还有一些中间件。
在每个组件中, 我们都可以通过dispatch函数，来触发相应的reducer去更新数据。当数据被更新的时候，Store会自动通知相应的组件去更新页面。
action #
这是一个动作，准确来说，用来描述一个动作。一个action返回一个数据集， 这些数据描述了一个动作，随后这个动作会被分发给对应的reducer去产生新的数据。这样新的数据就会被redux得到并更新原有的数据。
每个action都有一个字段叫type， 一般是个字符串，用来区分不同的action，同时其也是reducer针对不同action做不同操作的标志。action中定义的数据，我们可以理解为前端产生的数据，然后作为参数传给reducer。
reducer #
同时传给reducer的还有当前该组件中的state。这两个参数作为输入，返回新的state作为输出。这就是reducer的作用。
react 和redux #
上面讲的是每个各自的一些东西，二者并不是必须同时使用的，都是可以分开使用的，redux只是一个数据控制方式，react只是一种前端渲染的方式。二者都可以被替代。
在我们结合使用的过程中，react主要负责的就是渲染，redux就是负责组织数据，我们一般用的是react-redux。 这是专为react封装的一个redux库。
router #
路由一样也可以与上面二者结合，可能更独立一些，因为router是作为一种组件的角色在其中出现。在其内部定义了路由匹配规则，如果你知道django的路由规则，router与之是一样的。
真的总结 #
学习框架技术，在一定意义上，是学习一种思维方式，学会了思维的方式，剩余的就简单了。 接下来会写一些具体的技术细节， 以及各个库之间的联系，配合使用等。
redux在后来的实践中太过繁琐，逐渐被mobx取代。