宏观介绍React

1.React.js 简介

本书全书采用 ECMAScript 2015，阅读之前请确保自己已经掌握了 ECMAScript 2015 的基本语法，否则阅读起来会非常困难。

• React 不使用 HTML，而使用 JSX 。它打算抛弃 DOM，要求开发者不要使用任何 DOM 方法。
• React 的组件就相当于 MVC 里的 View，简单理解为： React.js 将帮助我们将界面分成了各个独立的小块，每一个块就是组件，这些组件之间可以组合、嵌套，就成了我们的页面。
• 一个组件的显示形态和行为有可能是由某些数据决定的。而数据是可能发生改变的，这时候组件的显示形态就会发生相应的改变。React.js 提供了一种非常高效的方式帮助我们做到了数据和组件显示形态之间的同步。
• React.js 不是一个框架，它只是一个库。在实际的项目当中，它并不能解决我们所有的问题，需要结合其它的库，例如 Redux、React-router 等来协助提供完整的解决方法。
• React有两个特点：组件化和高效的虚拟DOM
  我们会经常从继承React.Component类开始编写我们的组件。
  还有一点需要注意的是，并不是每个浏览器都支持ES6，因此目前情况下，我们需要 使用一些工具将我们编写的ES6代码转换为ES5代码，我推荐使用Babel。
• 虚拟DOM ：在React中，render执行的结果得到的并不是真正的DOM节点，结果仅仅是轻量级的JavaScript对象，我们称之为virtual DOM。其中，虚拟dom可以理解为真实元素的对应，它的构建与更新都是在内存中完成的，并不会真正渲染到DOM中去。

2.JSX语法

• JSX就是Javascript和XML结合的一种格式。React发明了JSX，利用HTML语法来创建虚拟DOM。当遇到 < ，JSX就当 HTML 解析，遇到 { 就当 JavaScript 解析。
• JSX本身就和XML语法类似，可以定义属性以及子元素。唯一特殊的是可以用 大括号 来加入JavaScript表达式。
• 大家看到 {{likedText: '已赞', unlikedText: '赞'}} 这样的代码的时候，不要以为是什么新语法。之前讨论过，JSX 的 {} 内可以嵌入任何表达式，{{}} 就是在 {} 内部用对象字面量返回一个对象而已。

• JSX 元素变量

  JSX 元素就是 JavaScript 对象。so，JSX 元素其实可以像 JavaScript 对象那样自由地赋值给变量，或者作为函数参数传递、或者作为函数的返回值。
  eg:

  render () {
          const  isGoodWord = true
          const goodWord = <strong> is good</strong>
          const badWord = <span> is not good</span>
          return (
              <div>
                <h1>
                  React 小书
                  {isGoodWord ? goodWord : badWord}
                </h1>
              </div>
          )
      }

3. diff算法

component diff
对于同一类型的组件，有可能其 Virtual DOM 没有任何变化，如果能够确切知道这一点，那么就可以节省大量的diff运算时间。因此，React允许用户通过 shouldComponentUpdate()来判断该组件是否需要进行diff算法分析。

4. React组件的构建方法

• 第一种： React.createClass

  const Botton = React.createClass({
  
  })

• 第二种：ES6 classes

  import React,{ Component} from 'react';
  
  class Button extends Component {
  
  }

• 第三种：无状态函数

  使用无状态函数构建的组件称为无状态组件

  function Button({ color = 'blue', text = 'Confirm'}) {
      return (
          <button className = {`btn btn-${color}`}>
              <em>{text}</em>
          </button>
      );
  }

  这里使用 ES6新的语法 ${NAME}，并把它放在反引号里，用于在字符串里面输出变量。
  无状态组件只传入props 和 context 两个参数，它不存在状态，也没有生命周期方法。

4. React数据流

在 React 中，数据是自顶向下单向流动的，即从父组件到子组件。React的单向数据流，主要的流通管道就是 props。

5. state 与 props

如果顶层组件初始化props，那么React 会向下遍历整棵组件树，重新尝试渲染所有的子组件。而state 只关心每个组件自己内部的状态，这些状态只能在组件内改变。
对于state来说，它的通信集中在组件内部；对于props来说，它的通信是父组件向子组件的传递。

props：props是React用来让组件之间互相联系的一种机制，通俗地讲就像方法中的参数一样。props本身是不可变的，组件的props一定来自于默认属性或通过父组件传递而来。

6.事件监听

• 为 React 的组件添加事件监听是很简单的事情，你只需要使用 React.js 提供了一系列的 on* 方法即可。而且没有经过特殊处理的话，这些 on* 的事件监听只能用在普通的 HTML 的标签上，而不能用在组件标签上。
• React.js 会给每个事件监听传入一个 event 对象，这个对象提供的功能和浏览器提供的功能一致，而且它是兼容所有浏览器的。
• React.js 的事件监听方法需要手动 bind 到当前实例，这种模式在 React.js 中非常常用。