react简介

一．React简介

1.1react是什么？

React是2014年facebook提出的开源的一个用于构建用户界面的JavaScript库

1.2react和angular比较（mvc和组件化开发的区别）

React专注于mvc架构中的v（view），实现ui组件化开发。

Angular的mvvm框架相对较重，不适合对性能要求较高的站点（移动端的web站）

Mvc的思想是实现视图，数据，控制器的分离，组件化的思想是使的ui功能模块之间的分离。

对于mvc开发模式来说，开发者更多的是从技术的角度来对ui进行拆分，实现松耦合。

对于react而言，开发者从功能的角度出发，将ui分成不同的组件，每一个组件都是独立封装。开发者按照界面自然划分的方式来组织编写代码，对于评论界面而言，整个ui是通过小组件构成的大组件，每个组件相互独立，只负责自己的逻辑部分，最终组合成评论界面。

1.3react开发和适用场景

React顺应了web开发组件化的趋势，应用react时，应该从ui出发，抽象出不同的组件，然后把这些组件拼装起来。

适用场景：1.复杂场景下的高性能。

2.重用组件库，组件组合。

1.4react的发展过程

React从最早的ui引擎变成了一整套前后端通吃的web App解决方案，衍生的react Native项目，目标是希望用写web App的方式去写Native App。如果能够实现这样的目标，整个互联网行业都会被颠覆，因为同一组人只需要写一次UI，就可以同时在服务器，浏览器和手机端运行。

1.5官方网址

英文网：http://facebook.github.io/react/docs/getting-started.html

1.6在线编辑工具

JSFiddle

1.7使用react的原因

创造react是为了解决一个问题：构建随着时间数据不断变化的大规模应用程序

1.8react的实现思想

l 简单：只要表达出你的应用程序在任一个时间点应该长什么样子，然后当底层的数据变化了，react会自动处理所有用户界面的更新。

l 声明式（Declarative）：数据变化后，react概念上与点击“刷新”按钮的效果类似，但仅仅只是更新变化的部分。

l 构建可组合的组件：react都是关于构建可复用的组件。事实上，通过react唯一要做的事情就是构建组件。由于其良好的封装性，组件使代码复用，测试和关注分离更加简单。

1.9参考资料

https://github.com/dingyiming/learn-Js-react/issues/1

二．React的概念构成

2.1virtual DOM（虚拟DOM）

虚拟DOM是react的基石，之所以引入虚拟DOM，一方面是性能的考虑：web应用和网站不同，一个web应用中通常会在单页面内有大量的DOM操作，而这些DOM操作很慢，在react中，react在每次需要渲染时，会先比较当前DOM内容和待渲染内容的差异，然后再决定如何最优地更新DOM，这个过程被称为reconciliation（和解）。

另一方面：react引入虚拟DOM更重要的意义是提供了一种一致的开发方式来开发服务器端应用、web应用和手机端应用

因为有了这层虚拟DOM，通过配备不同的渲染器，就可以将虚拟DOM的内容渲染到不同的平台。而应用开发者，使用JavaScript就可以通吃各个平台了。

2.2Virtual DOM速度快的原因

在web开发中，我们总需要将变化的数据实时地反映到UI视图上，这时，就需要对DOM进行操作。而复杂或频繁的dom操作通常是性能瓶颈产生的原因，react为此引入了虚拟DOM的机制：在浏览器端用Javascript实现了一套DOM API。基于React进行开发时所有的DOM构造都是通过虚拟DOM进行，每当数据发生变化时，React都会重新构建整个DOM树，然后，react会把当前的DOM树和原来的DOM树进行比较，得到DOM结构的区别，然后仅仅将变化的部分进行浏览器相应部位的更新。而且React能够批处理浏览器DOM的更新，在一个事件内的两次循环内的变化会被合并，因为虚拟DOM是内存数据，性能是及其高的，而对实际DOM进行操作的仅仅是Diff（不同）部分，因而能够达到提高性能的目的。这样，在保证性能的同时，开发者将不再需要关注某个数据的变化如何更新到一个或者多个具体的DOM元素上，只需要关心，在任一个数据状态下，整个界面是如何render（呈现表达）的就好。

2.3react组件

2.3.1什么是react组件

虚拟DOM不仅带来了简单的UI开发逻辑，同时也带来了组件化开发的思想。什么是组件：封装起来具有独立功能的UI部件。

React推荐以组件的方式去重新思考ui构成，把UI上每一个功能相对独立的模块定义成组件，然后将小的组件通过组合或者嵌套的方式构成大的组件，最终完成整体的UI构建。

2.3.2组件化开发特性

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

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

②　可重用：每个组件都是具有独立功能的，他可以被使用在多个ui场景中。

③　可维护：每个小的组件仅仅是包含自身的逻辑，更容易被理解和维护。

④　可测试：因为每个组件都是独立的，了么对各个组件分别测试显然要比对于整个ui进行测试容易的多。

2.3.3组件定义

在react中定义一个组件，组件就是实现预定义接口的JavaScript类：

1.组件渲染：

ReactDOM.render是react的最基本方法，用于将模板转化为HTML语言，，并插入指定的DOM节点。

ReactDOM.render（
<h1>hello，world！</h1>,
document.getElementById（‘example’）
）;

这个方法只能返回一个有效的React元素，这意味着，如果组件是由多个元素构成的，那么你必须在外边包一个顶层元素，然后返回这个顶层元素

render:function(){
    return React.createElement(
        "div",null,
        React.createElement("div",null,"header"),
        React.createElement("div",null,"content"),
        React.createElement("div",null,"footer")
    );
}
ES5方式定义组件
"use strict";
 
var HelloMessage = React.createClass({
  displayName: "HelloMessage",
 
  render: function render() {
    return React.createElement(
      "div",
      null,
      "Hello ",
      this.props.name
    );
  }
});
 
ReactDOM.render(React.createElement(HelloMessage, { name: "John" }), mountNode);

3、Jsx中定义组件

var HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});
 
ReactDOM.render(<HelloMessage name="John" />, mountNode);

4、ES6中定义组件

import './Hello.css';
import './Hello.scss';

import React, {Component} from 'react';

// 内联样式
let style={
    backgroundColor:'blue'
}

export default class Hello extends Component {
    constructor(props) {
        super(props);
        this.state = { count: 'es6'};
    }
    render() {
        return (
            <div>
                <h1 style={style}>Hello world{this.state.count}</h1>
                <br/>
                <image/>
            </div>
        )
    }
}

2.3.4注意点：

1.React组件名称首字母应该大写。

2.div元素的样式类是用className而不是class。

2.4JSX语法

2.4.1什么是JSX语法

在用React写组件的时候，通常会用到JSX语法（facebook为react开发的语法），粗看上去，像是在JavaScript中直接写起了XML标签，JSX（js+html）是一个语法糖（计算机语言中添加的某种语法，这种语法对语言的功能没有影响，目的是增加程序的可读性，从而减少程序代码出错的机会。类似的语法糖有coffeeScript，TypeScript最终都会被解析库解析成js），每一个XML标签都会被JSX转换工具转换成纯的JavaScript代码，利用JSX，组件的结构和组件之间的关系看上去更加清晰。

2.4.2JSX语法使用

HTML语言直接写在JavaScript语言之中，不加任何引号，这就是JSX的语法，它允许HTML和JavaScript的混写。

var names = ['Alice', 'Emily', 'Kate'];
 
ReactDOM.render(
  <div>
 {
  names.map(function (name) {
 return <div>Hello, {name}!</div>
})
}  </div>,
document.getElementById('example')
);

遇到<开头以HTML规则解析，遇到{}以javascript解析

JSX允许直接在模板插入JavaScript变量，如果变量是一个数组，那么在HTML中会展开这个数组的所有成员

var arr = [
  <h1>Hello world!</h1>,
  <h2>React is awesome</h2>,
];
ReactDOM.render(
  <div>{arr}</div>,
  document.getElementById('example')
);

上面代码的arr变量是一个数组，结果 JSX会把它的所有成员，添加到模板，运行结果如下。