React 实践记录 01 组件开发入门

Introduction

本文组成：

Ryan Clark文章Getting started with React的翻译。
博主的实践心得。

React由Facebook的程序员创建，是一个非常强大的javascript类库。

一个很大的卖点是virtual DOM机制，在DOM操作的性能上有较大的优势。

React社区常常介绍它为MVC架构中的“V”，虽说如此，如果将React与Flux(以后将会介绍)结合，我们就可以轻松实现M与V的同步。

在本文中，将会用到博主前两天介绍的webpack。以下是博文链接：

webpack 学习笔记 01 使用webpack的原因

 webpack 学习笔记 02 快速入门

Components

通过React，我们可以专注于可复用的组件开发，比如：一个下拉导航栏组件，一个功能齐全的数据表格。React中，像CommonJs标准中一样，React的组件与组件也能良好隔离，可以随意的在组件内部增加功能。

所有的React组件都需要实现一个函数: render，我们可以通过它，返回HTML或者调用其它的组件。正是这个基本的功能，给React带来了无限可能。

JSX

如果你曾经看过React相关的信息，那可能会对一个名词印象比较深刻：JSX。JSX使js无需""的包装，编写各类html tag。使得我们可以更快速的开发React组件(考虑到多行问题，在js中写HTML原本还是很麻烦的)。

我们可以借助一个js库，在浏览器中将JSX转换为js，但这不是推荐的做法，本文介绍了如何通过webpack在本地实现JSX到js的转换，使得浏览器不用解决这一问题。

Using JSX

render扮演着"ViewModel"的角色，在我们返回HTML信息前，将Model注入View，并加入各类js逻辑。

现在，我们新建一个目录，建立以下文件

index.html

entry.js

webpack.config.js

借助npm与bower我们可以快速下载依赖项

npm init

npm install babel-loader --save

bower install react

bower init

以下是index.html的内容，借助webpack，我们可以不用再修改它，就完成本示例了。

<html>

    <head>

        <meta charset="utf-8">

        <title>react demo</title>

    </head>

    <body>

        <script type="text/javascript" src="bundle.js" charset="utf-8"></script>

    </body>

</html>

以下是webpack配置内容

module.exports = {

  entry: "./entry.js",

  output:{

    path: __dirname,

    filename: "bundle.js"

  },

  module: {

  loaders: [

    {

      test: /\.js?$/,

      exclude: /(node_modules|bower_components)/,

      loader: 'babel'

    }

  ]}

}

配置做好了，让我们开始第一个JSX。

var React = require("./bower_components/react/react.js");

var Widget = React.createClass({

  render:function(){

    return(

    <div>

      <h1>React with webpack</h1>

    </div>);

  }

});

React.render(<Widget />, document.body);

运行指令

webpack -w

可以看到如下结果：

Using variables for attributes

如前文所说，React组件里可以加入任意的js逻辑，我们可以把刚才的JSX改成这样：

var Widget = React.createClass({

  render:function(){

    var text = "React with webpack";

    return(

    <div>

      <h1>{text}</h1>

    </div>);

  }

});

Basics of a component

组件可以维护自己作用域下的各类状态值。使我们得以复用各类组件。

当我们通过向组件的attributes传值时，他们会作为properties而引用。这句话可能不好理解，我们看下代码：

var Widget = React.createClass({

  render:function(){

    var text = "";

    return(

    <div>

      <h1>{this.props.displayText}</h1>

    </div>);

  }

});

React.render(<Widget displayText="React with webpack"/>, document.body);

State

properties适合用在一次渲染，不需要改变的组件场景。在状态需要动态改变的场合，我们会用到state。通过this.setState 函数以改变状态值，之后，组件会重新渲染(借助virtual DOM机制，这一部分还是蛮快的)。以下是Demo

var Widget = React.createClass({

  getInitialState: function(){

    return{

      number: 0

    };

  },

  increment: function(){

    this.setState({

      number: this.state.number + 1

    });

  },

  render: function(){

    return(

    <div>

      <h1>{this.state.number}</h1>

      <button onClick={this.increment}>Inc</button>

    </div>);

  }

});

显示的数字将伴随按钮点击上升。

The component lifecycle

所有的组件都是有生命周期的，这无疑为我们开发提供了很大的便利。比如刚才例子中的getInitialState，只会在控件装载(mount)后，调用一次。当然还有其它的生命周期函数：

componentWillMount在组件即将装载前调用，可以把Ajax放这。

componentDidMount在组件已经被渲染出了DOM后调用，这时，我们可以借助this.getDOMNode取到跟节点，做一些后续工作。

componentWillUnmount组件被移除时，相关资源的清理工作，就得在这里(如移除EventHandler，若EventHandler操作了不存在的组件，error自然就被抛出)。

Component Methods

通过getDefaultProps，我们可以为properties提供默认值，即当properties没有通过attributes传入，这些默认值会派上用场。

var Widget = React.createClass({

  getDefaultProps: function(){

    return{

      number: 10

    };

  },

  render: function(){

    return(

    <div>

      <h1>{this.props.number}</h1>

    </div>);

  }

});

React.render(<Widget/>, document.body);

React并不提倡提供过多的模版功能，它提倡的是回归原始，比如：当我们需要用到repeater。我们可以这样：

var Widget = React.createClass({

  render: function(){

    var data =[1,2,3,4]; //请假设这是有用数据

    var content = data.map(function(item){

      return (<h2>{item}</h2>)

    });

    return(

    <div>

      <h1>{content}</h1>

    </div>);

  }

});