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

2017-09-11 本文已影响0人前端小华子

一、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 内。

<html>
<head lang="en">   
<meta charset="UTF-8">   
<title>简书</title>
<script src="https://cdn.bootcss.com/react/15.6.1/react.js"></script>
<script src="https://cdn.bootcss.com/react/15.6.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
</head>
<body>   
<div id="example">
   
</div>
<script type="text/babel">
    var HelloMessage = React.createClass({
        render: function() {
                return<h1>欢迎访问 {this.props.name}</h1>;
           }  
});
    ReactDOM.render(
          <HelloMessage name="jianshu.com" />,
          document.getElementById('example'));

  </script>

</body>

</html>

（2）运行效果

QQ截图20170911174928.png

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

QQ截图20170911175115.png

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

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

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>简书</title>
    <script src="https://cdn.bootcss.com/react/15.6.1/react.js"></script>
    <script src="https://cdn.bootcss.com/react/15.6.0/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
</head>
<body>
  <div id="example"></div>
  <script type="text/babel">
      var Timer = React.createClass({
          /*初始状态*/
          getInitialState: function() {
              return {secondsElapsed: 0};
          },
          tick: function() {
              this.setState({secondsElapsed: this.state.secondsElapsed + 1});
          },
          /*组件完成加载*/
          componentDidMount: function() {
              this.interval = setInterval(this.tick, 1000);
          },
          /*组件将被卸载*/
          componentWillUnmount: function() {
              clearInterval(this.interval);
          },
          render: function() {
              return (
                      <div>现在已经过去了: {this.state.secondsElapsed}秒</div>
              );
          }
      });
      ReactDOM.render(<Timer />, document.getElementById('example'));
  </script>
</body>
</html>

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

QQ截图20170911175645.png
3，稍微复杂一点样例
（1）样例说明

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

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>简书</title>
    <script src="https://cdn.bootcss.com/react/15.6.1/react.js"></script>
   <script src="https://cdn.bootcss.com/react/15.6.0/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
</head>
<body>
  <div id="example"></div>
  <script type="text/babel">
    var ShowEditor = React.createClass({
        getInitialState: function() {
            return {value: '在这里输入文字'};
        },
        handleChange: function() {
            this.setState({value: ReactDOM.findDOMNode(this.refs.textarea).value});
        },
        render: function() {
            return (
                <div>
                    <h3>输入：</h3>
                    <textarea style={{width:300, height:150, outline:'none'}}
                        onChange={this.handleChange}
                        ref="textarea"
                        defaultValue={this.state.value} />
                    <h3>输出:</h3>
                    <div>
                        {this.state.value}
                    </div>
                </div>
            );
        }
    });
    ReactDOM.render(<ShowEditor />, document.getElementById('example'));
  </script>
</body>
</html>

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

QQ截图20170911180104.png