React快速入门教程

简介

　　Facebook官网介绍：React 是一个用来构建用户界面的 JavaScript 库。相当于 MVC 架构的 V 层。

　　React 的核心思想是：封装组件，各个组件维护自己的状态和UI，当状态变更，自动重新渲染整个组件。

　　React的优点（React为什么这么火？）：

　　　　

组成　　

　　React构建界面的三要点：组件、路由、状态管理。

　　React 的核心内容：JSX和虚拟 DOM。

　　　　一个最基本的 React 组件由数据和JSX两个主要部分构成，我们先来看看数据。

　　　　

• 这是一个简单完整的React组件（类），props 主要作用是提供数据来源，可以简单的理解为 props 就是构造函数的参数。 state 唯一的作用是控制组件的表现，用来存放会随着交互变化状态，比如开关状态等。JSX 做的事情就是根据 state 和 props 中的值，结合一些视图层面的逻辑，输出对应的 DOM 结构。

　　　　在组件内部，可以通过this.props来访问props

　　　　React的一大创新，就是把每一个组件都看成是一个状态机，组件内部通过state来维护组件状态的变化，这也是state唯一的作用。

　　　　

• 传统 Web App：是直接和DOM交互，由App来控制DOM的构建和渲染、元素属性的读写、事件的注册和销毁等。
• React Web App：是通过虚拟DOM来交互。虚拟DOM是在DOM的基础上建立了一个抽象层，我们对数据和状态所做的任何改动，都会被自动且高效的同步到虚拟DOM，最后再批量同步到DOM中。（渲染效率高）

　　　　

　　React目前支持的事件列表：

　　　　

生命周期

　　大体可以分为三个过程：初始化、更新和销毁，在组件生命周期中，随着组件的props或者state发生改变，它的虚拟DOM和DOM表现也将有相应的变化。

　　一、初始化：

　　

　　解析：

1. 组件类在声明时，会先调用 getDefaultProps() 方法来获取默认props值，这个方法会且只会在声明组件类时调用一次，这一点需要注意，它返回的默认props由所有实例共享。
2. 在组件被实例化之前，会先调用一次实例方法 getInitialState() 方法，用于获取这个组件的初始state。
3. 实例化之后就是渲染，componentWillMount方法会在生成虚拟DOM之前被调用，你可以在这里对组件的渲染做一些准备工作，比如计算目标容器尺寸然后修改组件自身的尺寸以适应目标容器等等。
4. 接下来就是渲染工作，在这里你会创建一个虚拟DOM用来表示组件的结构。

对于一个组件来说，render 是唯一一个必须的方法。render方法需要满足这几点：

　　　　　　1）只能通过 this.props 或 this.state 访问数据

　　　　　　2）只能出现一个顶级组件

　　　　　　3）可以返回 null、false 或任何 React 组件

　　　　　　4）不能对 props、state 或 DOM 进行修改