React入门学习

React来源

　　首先react是facebook开发的一款js框架。
　　
　　facebook认为MVC无法满足他们的扩展需求，由他们非常巨大的代码库和庞大的组织，使得MVC变得非常的复杂，每当需要添加一项新的功能系统的复杂程度就成级数整长，代码变得不可预测。于是他们认为MVC大规模的应用。当系统中有很多模型和相应的视图，其复杂程度会迅速扩大。非常难以调试和理解。这里我们先来了解一下MVC

MVC

　　Model（模型）：应用程序中用于处理应用程序数据逻辑的部分。通常模型数据对象负责在数据库中存取数据。
　　View（视图）：应用程序中处理数据显示的部分。通常是一句模型数据创建的。
　　Controller（控制器 ）：处理用户交互的部分。负责从视图读取数据。控制用户输入，并向模型发送数据。

简单解释一下

　　View传送指令到Controller。

　　Controller完成业务逻辑之后，要求Model改变状态。

　　Model将新的数据发送到View，用户得到反馈。
　　
　　互动模式：接受用户指令时，MVC可以分成两种方式。
　　
　　（一）通过View接受指令，传递给Controller
　　
　　（二）直接通过Controller接受指令。

MVP

　　将MVP模式中Controller改为Presenter，并且改变了通信方向。
　　
　　1.各部分之间的通信，都是双向的

　　2.View与Model之间不发生联系，都是通过Presenter传递

　　3.View层非常薄，不部署任何业务逻辑，被称之为被动视图，而Presenter非常厚，所有逻辑都部署在这里.
　　
　　需要注意的是React不是一个完整的MVC框架，最多可以认为是MVC中的V（View），甚至React并不非常认可MVC开发模式。

React原理

　　传统页面操作DOM一般都是直接操作，代价很大。从排从绘的非常的消耗性能。而React为了尽可能的减少对DOM的操作。提供了一种不同而有强大的方式来更新DOM，代替直接操作DOM。就是轻量级的Virtual DOM （虚拟DOM）。
　　又由于Diff算法,React不会立即更新真实的DOM，它会等到React事件循环结束，利用Diff算法。每当数据发生变化时，React都会进行重新构建整个虚拟DOM树，然后React将当前整个虚拟DOM树和之前的DOM树进行比较，将DOM结构改变的那一部分进行渲染。
　　Diff算法，是一种基于红黑树的算法，它会计算虚拟DOM到实际渲染DOM结构的最少步骤。

React组件化

　　components组件是React的重中之重。在DOM树上的节点成为元素，在这里则不同，Virtual DOM上称为commponent。Virtual DOM的节点就是一个完整抽象的组件，它是由commponents组成。
　　虚拟DOM(virtual-Dom)不仅带来了简单的UI开发逻辑，同时也带来了组件化开发的思想，所谓组件，即封装起来的具有独立功能的UI部件。
　　React推荐以组件的方式去重新思考UI构成，将UI上每一个功能相对独立的模块定义成组件，然后将小的组件通过组合或者嵌套的方式构成大的组件，最终完成整体UI的构建。
　　对于MVC开发模式来说，开发者将三者定义成不同的类，实现了表现，数据，控制的分离。开发者更多的是从技术的角度来对UI进行拆分，实现松耦合。
　　对于React而言，则完全是一个新的思路，开发者从功能的角度出发，将UI分成不同的组件，每个组件都独立封装。例如：
　　一个页面的评论区，内容区，标题。三个板块相互独立。互不影响。
　　

一个完整的React组件应该具有以下的特点：

　　（1）可组合（Composeable）：一个组件易于和其它组件一起使用，或者嵌套在另一个组件内部。如果一个组件内部创建了另一个组件，那么说父组件拥有（own）它创建的子组件，通过这个特性，一个复杂的UI可以拆分成多个简单的UI组件；

　　（2）可重用（Reusable）：每个组件都是具有独立功能的，它可以被使用在多个UI场景；

　　（3）可维护（Maintainable）：每个小的组件仅仅包含自身的逻辑，更容易被理解和维护；

组件的生命周期：

组件的生命周期分成三个状态:

　　Mounting：已插入真实DOM

　　Updating：正在被重新渲染

　　Unmounting：已移除真实DOM

　　React为每一个状态都提供了两种处理函数：will函数和did函数。

　　will函数是在进入状态之前调用，did函数实在进入状态之后调用，三种状态一共五个函数。