React - 功能介绍、安装配置说明（附几个简单的入门样例）

一、React介绍

1.React的起源与发展

• React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。

• 做出来以后，发现这套东西很好用，就在2013年5月开源了。

• 由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。

2 .React的特点

• 只作为 UI（Just the UI）：React 不是一个完整的 MVC 框架，最多是作为视图（View）在 MVC 中使用。（甚至 React 并不非常认可 MVC 开发模式。它提出的是一个新的开发模式和理念，强调的是“用户界面”。React 希望将功能分解化，让开发变得像搭积木一样，快速且可维护。）

• 虚拟 DMO 机制（Virtual DOM）：这是 React 的一个亮点，可以很好地优化视图的渲染和刷新。过去我们更新视图是，需要先清空 DOM 容器里的内容，然后将最新的 DOM 和数据追加到容器中。而 React 将这一操作放进了内存。通过将视图变化放进内存进行比较（虚拟 DOM 比较），计算出最小更新的视图，然后将差异部分进行更新以完成整个组件的渲染。这正是React 如此高效的原因。

• 数据流（Data Flow）：React 实现了单向的数据流，并且对于传统的数据绑定而言，React 更加灵活、便捷。

3，网站地址

• 官网地址：https://facebook.github.io/react/
• GitHub地址：https://github.com/facebook/react

二、准备工作

在使用 ReactJS 进行开发前，我们需要准备好这三个 js 文件：react.js、react-dom.js、browser.js。下面分别对它们进行介绍。
1. react.js 和 react-dom.js
前者是 React 主要核心，后者负责 React DOM 操作。可以访问下面地址下载最新版本：
https://github.com/facebook/react/releases
2. browser.js
实现浏览器端对 JSX 的编译。（在 react 0.14 前，使用 jsxtransformer.js，后改为 browser.js）
由于 browser.js 非常大，我们开发测试可以引用如下地址：
https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js
这种运行时解析转换 JSX 建议只在开发测试时使用。生产环境下可以借助编译工具（babel）事先将 JSX 编译成 JS。这样代码经过预编译、压缩和合并后，会提高网络的加载速度，减少流量带宽的浪费，优化用户体验。

三、使用样例

1. 简单组件和数据传递
我们可以使用 this.props 来做简单的数据传递。
（1）样例说明
定义了一个组件 HelloMessage。通过传入的 name 属性，用于 h1 标签渲染。
使用 ReactDOM.render 方法将组件渲染到 id 为 example 的 div 内。

（2）运行效果

QQ截图20170911174928.png

（3）使用 Chrome 调试工具可以看到渲染后内文档内容如下。

QQ截图20170911175115.png

2. 通过this.state更新视图
（1）样例说明

• getInitialState：设置组件的初始状态，必须返回一个对象或 null 对象。我们可以在此准备组件需要的数据以及后期需要更新的数据模型。
• componentDidMount：组件加载完成时调用。这里我们创建一个定时器，定时改变 this.state 里的数据。
• render：该方法用来渲染视图。this.state 发生改变时，该方法会自动调用。
• componentWillUnmount：组件被卸载时调用。我们在这里清除定时器 this.interval。

（2）运行效果。每隔一秒钟，secondsElapsed 就会加 1。同时页面也会自动刷新。

QQ截图20170911175645.png

3，稍微复杂一点样例
（1）样例说明

• 我们在 textarea 上绑定了 onChange 的事件监听，目的是通过 setState 改变this.state.value。
• 同时 textarea 上添加了 ref 属性，这样就可以通过 this.refs.testarea 引用这个 textarea 对象了。
• 通过 ReactDOM 提供的 findDOMNode 方法，可以找到 React 的 DOM。

（2）运行效果。在上方的 textarea 中输入内容后，下方的 div 中会同步显示出输入的内容文字。

QQ截图20170911180104.png