一、什么是React

React是由Facebook（脸书）开源的一个进行创建用户界面的一款JavaScript库，如今已应用于Facebook及旗下的Instagram应用。

React与庞大的AngularJS不同的地方在于它只专注于MVC框架中的V，即视图；这点使得React很容易与开发者已有的开发栈进行融合。

React在使用的时候，你应该从UI出发，抽象出不同的组件，继而将它们拼装起来；这点顺应了Web开发组件化的趋势。

使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作“组件”。

总结具有三个强大特点：

（1）声明式

以声明式编写 UI，可以让你的代码更加可靠，且方便调试。

React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据变动时 React 能高效更新并渲染合适的组件。

（2）组件化

构建管理自身状态的封装组件，然后对其组合以构成复杂的 UI。

由于组件逻辑使用 JavaScript 编写而非模板，因此你可以轻松地在应用中传递数据，并保持状态与 DOM 分离。

各个组件维护自己的状态和UI，当状态变更，自动重新渲染整个组件。

（1）一次学习，随处编写

无论你现在使用什么技术栈，在无需重写现有代码的前提下，通过引入 React 来开发新功能。

React 还可以使用 Node 进行服务器渲染，或使用 React Native 开发原生移动应用。

二、React的基本概念

1.组件

React 组件使用一个名为 render() 的方法，将声明的组件作为接收输入的数据并返回需要展示的内容。这也是React不需要操作DOM的原因。

组件可以存在状态，除了使用外部数据（通过 this.props 访问）以外，组件还可以维护其内部的状态数据（通过 this.state 访问）。当组件的状态数据改变时，组件会再次调用 render() 方法重新渲染对应的标记。

例如：

class Timer extends React.Component {

  constructor(props) {

    super(props);

    this.state = { seconds: 0 };

  }

  tick() {

    this.setState(state => ({

      seconds: state.seconds + 1

    }));

  }

  componentDidMount() {

    this.interval = setInterval(() => this.tick(), 1000);

  }

2.JSX

React是可以直接将HTML直接嵌入JS代码中，这种是如何实现的呢？React 提出的一种叫 JSX 的语法，是一个 JavaScript 的语法扩展，这应该是最开始接触 React 最不能接受的设定之一，因为前端被“表现和逻辑层分离”这种思想“洗脑”太久了。但实际上组件的 HTML 是组成一个组件不可分割的一部分，能够将 HTML 封装起来才是组件的完全体，React 发明了 JSX 让 JS 支持嵌入 HTML 不得不说是一种非常聪明的做法，让前端实现真正意义上的组件化成为了可能。

也就是说React 并没有采用将标记与逻辑分离到不同文件这种人为的分离方式，而是通过将二者共同存放在称之为“组件”的松散耦合单元之中，来实现关注点分离。

3.Virtual DOM

Virtual DOM 是一种编程概念。在这个概念里， UI 以一种理想化的，或者说“虚拟的”表现形式被保存于内存中，并通过如 ReactDOM 等类库使之与“真实的” DOM 同步。这一过程叫做协调。

这种方式赋予了 React 声明式的 API：您告诉 React 希望让 UI 是什么状态，React 就确保 DOM 匹配该状态。这使您可以从属性操作、事件处理和手动 DOM 更新这些在构建应用程序时必要的操作中解放出来。

与其将 “Virtual DOM” 视为一种技术，不如说它是一种模式，人们提到它时经常是要表达不同的东西。

在 React 的世界里，术语 “Virtual DOM” 通常与 React 元素关联在一起，因为它们都是代表了用户界面的对象。而 React 也使用一个名为 “fibers” 的内部对象来存放组件树的附加信息。上述二者也被认为是 React 中 “Virtual DOM” 实现的一部分。

 4.Data Flow

“单向数据绑定”是 React推崇的一种应用架构的方式。当应用足够复杂时才能体会到它的好处，虽然在一般应用场景下你可能不会意识到它的存在。

上面所说组件支持重新渲染数据模型，如果你的数据模型发生了改变，再次调用 root.render()，UI 就会相应地被更新。数据模型变化、调用 render() 方法、UI 相应变化，这个过程并不复杂，因此很容易看清楚 UI 是如何被更新的，以及是在哪里被更新的。React 单向数据流（也叫单向绑定）的思想使得组件模块化，易于快速开发。

三、React的简单使用

（1）自定义定义一个组件:

React 中拥有多种不同类型的组件，我们需要继承React.Component 即可。组件中有参数叫做 props，我们可以直接使用，然后通过 render 方法返回需要展示在屏幕上的视图的层次结构。

class Test extends React.Component {

  render() {

    return (

      <div className="test">

        <h1>test {this.props.name}</h1>

      </div>

    );

  }

}

（2）组件之间的交互，通过Props传递数据

1）定义组件Board

class Board extends React.Component {

  renderSquare(i) {

    return <Square value={i} />;

  }

}

2）定义组件Square

class Square extends React.Component {

  render() {

    return (

      <button className="square">

        {this.props.value}

      </button>

    );

  }

}

3）修改组件Board，实现渲染效果，将value值传给Square 组件，渲染显示

class Board extends React.Component {

  renderSquare(i) {

    return <Square value={i} />;

  }

  render() {

    return (

      <div>

        <div className="status">{status}</div>

        <div className="board-row">

          {this.renderSquare(0)}

          {this.renderSquare(1)}

          {this.renderSquare(2)}

        </div>

      </div>

    );

  }

}

（3）组件的有状态，通过state 更新数据

React 组件的构造函数中设置 this.state 来初始化 state。this.state 应该被视为一个组件的私有属性。我们可以在任意时刻都可以修改这个状态值

class Square extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      value: null,

    };

  }

  render() {

    return (

      <button

        className="square"

        onClick={() => this.setState({value: 'X'})}

      >

        {this.state.value}

      </button>

    );

  }

}