react起源

简介

React（有时叫React.js或ReactJS），是一个为数据提供渲染为HTML视图的开源JavaScript 库。React视图通常采用包含以自定义HTML标记规定的其他组件的组件渲染。React为程序员提供了一种子组件不能直接影响外层组件（"data flows down"）的模型，数据改变时对HTML文档的有效更新，和现代单页应用中组件之间干净的分离。

它由Facebook、Instagram和一个由个人开发者和企业组成的社群维护。^[2][3][4]根据JavaScript分析服务Libscore，React目前正在被Netflix、Imgur、Bleacher Report、Feedly、Airbnb、SeatGeek、HelloSign等很多网站的主页使用。^[5]

历史

React由Facebook 的软件工程师Jordan Walke创建。他受到PHP的HTML组件框架XHP影响。^[6]该框架首先于2011年部署于Facebook的 newsfeed，随后于2012年部署于Instagram。它于2013年5月在JSConf US开源。

除此之外，React还有React Native框架，可以用JavaScript写原生应用程序。

一、React的概念知识：

适用的项目：数据不断变化的大型应用程序，优点：高性能高效率；

React是一个轻量级试图层前端js框架；

React 特点和优势：

1.JSX语法糖

全称为javascript xml，作用是帮助React构建虚拟dom结构，不使用jsx的话，需要使用React.createElement(tagName,options:(id,className),contents..)

使用jsx语法会使react开发更为简单，xml指的只是借鉴了一些XML的语法，标签必须闭合，最外层必须有节点包裹

jsx语法需要编译成React.createElement

2.虚拟dom

React会在js中根据组件的虚拟dom结构来构建出完整的一套虚拟DOMapi，每一次的数据变化React都会重新构建一套完整的虚拟DOM和上一次的虚拟DOM利用DIFF算法计算出不同的地方，重新渲染，因为所有的操作都是在虚拟DOM中，很大程度避免了操作真实DOM，所以性能极高，且React还能将两次连续的数据变化合并到一起

注意：react如何创建虚拟dom，diff算法如何进行对比

3.单向数据流

其实reactjs的核心内容就是数据绑定，所谓数据绑定指的是只要将一些服务端的数据和前端页面绑定好，开发者只关注实现业务就行了

单向数据流：只要服务端数据发生变动，前端数据也变动

4.组件化开发

React的组件化开发是体现其高效率的地方

组件其实就是html，js，css，image等部分的聚合体，页面结构中独立的功能部分

组件应该拥有的性质：

（1）可组合（Composeable）：一个组件易于和其它组件一起使用，或者嵌套在另一个组件内部。如果一个组件内部创建了另一个组件，那么说父组件拥有（own）它创建的子组件，通过这个特性，一个复杂的UI可以拆分成多个简单的UI组件； （2）可重用（Reusable）：每个组件都是具有独立功能的，它可以被使用在多个UI场景； （3）可维护（Maintainable）：每个小的组件仅仅包含自身的逻辑，更容易被理解和维护 （4）可测试（Testable）：因为每个组件都是独立的，那么对于各个组件分别测试显然要比对于整个UI进行测试容易的多。

划分组件的原则： 复用率高的，逻辑较为独立的

5. React核心对象

react.js中React,react-dom.js中有一个ReactDOM

6 React的样式和事件

R推荐使用行内样式，这样就可以更大程度保护组件的独立性，事件也需要通过行内设置的方法来设置

7 React组件的props和state

R数据的挂载主要依靠props和state；1.属性（props） 在组件外部传入，或者内部设置，组件内部通过this.props获得2.状态（state） 在组件内部设置或者更改，组件内部通过this.state获得相似点：都是纯js对象，都会触发render更新，都具有确定性（状态/属性相同，结果相同）不同点： 属性能从父组件获取，状态不能 属性可以由父组件修改，状态不能 属性能在内部设置默认值 ，状态也可以 属性不在组件内部修改 ，状态要改 属性能设置子组件初始值 ，状态不可以 属性可以修改子组件的值，状态不可以状态只和自己相关，由自己维护属性不要自己修改，可以从父组件获取，也可以给子组件设置组件在运行时自己需要修改的数据其实就是状态而已

8 ref

组件可以在renderdom结构中通过ref对dom、子组件进行标记，在组件里通过this.refs来获取，就可以操作真实DOM和调用子组件的属性方法

9.生命周期

10.组件通信

二、对ReactJS的认识及ReactJS的优点

首先，对于React，有一些认识误区，这里先总结一下：

• React不是一个完整的MVC框架，最多可以认为是MVC中的V（View），甚至React并不非常认可MVC开发模式；

• React的服务器端Render能力只能算是一个锦上添花的功能，并不是其核心出发点，事实上React官方站点几乎没有提及其在服务器端的应用；

• 有人拿React和Web Component相提并论，但两者并不是完全的竞争关系，你完全可以用React去开发一个真正的Web Component；

• React不是一个新的模板语言，JSX只是一个表象，没有JSX的React也能工作。

1、ReactJS的背景和原理

• 在Web开发中，我们总需要将变化的数据实时反应到UI上，这时就需要对DOM进行操作。而复杂或频繁的DOM操作通常是性能瓶颈产生的原因（如何进行高性能的复杂DOM操作通常是衡量一个前端开发人员技能的重要指标）。React为此引入了虚拟DOM（Virtual DOM）的 机制：在浏览器端用Javascript实现了一套DOM API。基于React进行开发时所有的DOM构造都是通过虚拟DOM进行，每当数据变化时，React都会重新构建整个DOM树，然后React将当前 整个DOM树和上一次的DOM树进行对比，得到DOM结构的区别，然后仅仅将需要变化的部分进行实际的浏览器DOM更新。而且React能够批处理虚拟 DOM的刷新，在一个事件循环（Event Loop）内的两次数据变化会被合并，例如你连续的先将节点内容从A变成B，然后又从B变成A，React会认为UI不发生任何变化，而如果通过手动控 制，这种逻辑通常是极其复杂的。尽管每一次都需要构造完整的虚拟DOM树，但是因为虚拟DOM是内存数据，性能是极高的，而对实际DOM进行操作的仅仅是 Diff部分，因而能达到提高性能的目的。这样，在保证性能的同时，开发者将不再需要关注某个数据的变化如何更新到一个或多个具体的DOM元素，而只需要 关心在任意一个数据状态下，整个界面是如何Render的。

• 如果你像在90年代那样写过服务器端Render的纯Web页面那么应该知道， 服务器端所要做的就是根据数据Render出HTML送到浏览器端。如果这时因为用户的一个点击需要改变某个状态文字，那么也是通过刷新整个页面来完成 的。服务器端并不需要知道是哪一小段HTML发生了变化，而只需要根据数据刷新整个页面。换句话说，任何UI的变化都是通过整体刷新来完成的。而 React将这种开发模式以高性能的方式带到了前端，每做一点界面的更新，你都可以认为刷新了整个页面。至于如何进行局部更新以保证性能，则是React 框架要完成的事情。

2、组件化

• 虚拟DOM(virtual-dom)不仅带来了简单的UI开发逻辑，同时也带来了组件化开发的思想，所谓组件，即封装起来的具有独立功能的UI部件。 React推荐以组件的方式去重新思考UI构成，将UI上每一个功能相对独立的模块定义成组件，然后将小的组件通过组合或者嵌套的方式构成大的组件，最终 完成整体UI的构建。例如，Facebook的instagram.com整站都采用了React来开发，整个页面就是一个大的组件，其中包含了嵌套的大 量其它组件，大家有兴趣可以看下它背后的代码。

• 如果说MVC的思想让你做到视图-数据-控制器的分离，那么组件化的思考方式则是带来了UI功能模块之间的分离。我们通过一个典型的Blog评论界面来看MVC和组件化开发思路的区别。

• 对于MVC开发模式来说，开发者将三者定义成不同的类，实现了表现，数据，控制的分离。开发者更多的是从技术的角度来对UI进行拆分，实现松耦合。

• 对于React而言，则完全是一个新的思路，开发者从功能的角度出发，将UI分成不同的组件，每个组件都独立封装。

• 在React中，你按照界面模块自然划分的方式来组织和编写你的代码，对于评论界面而言，整个UI是一个通过小组件构成的大组件，每个组件只关心自己部分的逻辑，彼此独立。

React认为一个组件应该具有如下特征：

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

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

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

3.ReactJS组件

1、组件属性

前面说了，ReactJS是基于组件化的开发，下面我们开始来学习ReactJS里面的组件，React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass 方法就用于生成一个组件类。

下面，我们来编写第一个组件Greet，有一个name属性，然后输出hello + name的值，代码如下：

看到这段代码，接触过AngularJS的朋友们是不是有一种熟悉的感觉，不过这里有几点需要注意：

• 1）获取属性的值用的是this.props.属性名

• 2）创建的组件名称首字母必须大写。

• 3）为元素添加css的class时，要用className。

• 4）组件的style属性的设置方式也值得注意，要写成style={{width: this.state.witdh}}。

2、组件状态

• 组件免不了要与用户互动，React 的一大创新，就是将组件看成是一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染 UI 。下面我们来编写一个小例子，一个文本框和一个button，通过点击button可以改变文本框的编辑状态，禁止编辑和允许编辑。通过这个例子来理解 ReactJS的状态机制。先看代码：

• 这里，我们又使用到了一个方法getInitialState,这个函数在组件初始化的时候执行，必需返回NULL或者一个对象。这里我们可以通过 this.state.属性名来访问属性值，这里我们将enable这个值跟input的disabled绑定，当要修改这个属性值时，要使用 setState方法。我们声明handleClick方法，来绑定到button上面，实现改变state.enable的值。效果如下：

原理分析：

• 当用户点击组件，导致状态变化，this.setState 方法就修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件。

这里值得注意的几点如下：

• 1）getInitialState函数必须有返回值，可以是NULL或者一个对象。

• 2）访问state的方法是this.state.属性名。

• 3）变量用{}包裹，不需要再加双引号。

3、组件的生命周期
这里下期会做专门阐述，传送门：

ReactJS小结

关于ReactJS今天就先学习到这里了，下面来总结一下，主要有以下几点：

1、ReactJs是基于组件化的开发，所以最终你的页面应该是由若干个小组件组成的大组件。

2、可以通过属性，将值传递到组件内部，同理也可以通过属性将内部的结果传递到父级组件(留给大家研究)；要对某些值的变化做DOM操作的，要把这些值放到state中。

3、 为组件添加外部css样式时，类名应该写成className而不是class;添加内部样式时，应该是style={{opacity: this.state.opacity}}而不是style="opacity:{this.state.opacity};"。

4、组件名称首字母必须大写。

5、变量名用{}包裹，且不能加双引号。