当前位置: > > > React - 功能介绍、安装配置说明(附几个简单的入门样例)

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

一、React介绍

1,React的起源与发展

(1)React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站。
(2)做出来以后,发现这套东西很好用,就在2013年5月开源了。
(3)由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单。所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具。

2,React的特点

(1)只作为 UIJust the UI):React 不是一个完整的 MVC 框架,最多是作为视图(View)在 MVC 中使用。(甚至 React 并不非常认可 MVC 开发模式。它提出的是一个新的开发模式和理念,强调的是“用户界面”。React 希望将功能分解化,让开发变得像搭积木一样,快速且可维护。)
(2)虚拟 DMO 机制(Virtual DOM):这是 React 的一个亮点,可以很好地优化视图的渲染和刷新。过去我们更新视图是,需要先清空 DOM 容器里的内容,然后将最新的 DOM 和数据追加到容器中。而 React 将这一操作放进了内存。通过将视图变化放进内存进行比较(虚拟 DOM 比较),计算出最小更新的视图,然后将差异部分进行更新以完成整个组件的渲染。这正是React 如此高效的原因。
(3)数据流(Data Flow):React 实现了单向的数据流,并且对于传统的数据绑定而言,React 更加灵活、便捷。

3,网站地址

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

二、准备工作

在使用 ReactJS 进行开发前,我们需要准备好这三个 js 文件:react.jsreact-dom.jsbrowser.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 内。
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>hangge</title>
    <script type="text/javascript" src="react.js"></script>
    <script type="text/javascript" src="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="hangge.com" />, document.getElementById('example'));
    </script>
</body>
</html>
(2)运行效果

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

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>hangge</title>
    <script type="text/javascript" src="react.js"></script>
    <script type="text/javascript" src="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。同时页面也会自动刷新。

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>hangge</title>
    <script type="text/javascript" src="react.js"></script>
    <script type="text/javascript" src="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 中会同步显示出输入的内容文字。

评论2
  • 2楼
    2017-11-16 10:28
    千城

    大兄弟的博客写的真不错,我的swift也是在你这里学到了很多东西!

    站长回复

    多谢夸奖,欢迎常来看看,我会持续更新下去的。

  • 1楼
    2017-01-06 14:07
    macfai

    以后就和航哥一起学习RN了,真不错

    站长回复

    谢谢支持。RN相关内容我会持续更新的。