React.js快速入门

本文会通过一个非常简单的应用，让你理解React.js的基础。

开始

首先我们需要准备一个最基础的模版。一个HTML文件，包含React和ReactDOM库，如下:

<html>
<head>
<script src="https://unpkg.com/react@15/dist/react.min.js"> </script><script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js">
</script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
    
    /* 
    在这里添加你的代码
    */
    
    </script>
</body>
</html>

因为React使用JSX语法，浏览器是不能理解JSX，需要将JSX转成JavaScript，所以我们加入了Babel。

模版中有两点值得注意：

1.<div id="root">是整个应用的入口点，UI都会显示在这

2.<script type="text/babel">是我们写React.js代码的地方

组件

React.js中所有的对象都是组件，并且是以JavaScript类的形式存在的。我们可以通过扩展React-Component类来创建一个组件。我们先创建一个Hello的组件。

class Hello extends React.Component {
    render() {
        return <h1>Hello world!</h1>;
    }
}

然后我们可以定义组件的方法。在Hello组件中我们只定义了一个方法render()

在render()中我们需要告诉React这个组件长什么样子。

在Hello这个组件中，我们返回了一个<h1>的标签，里面包含了Hello world!的文本。<h1>标签这里就使用了JSX语法。

我们可以使用ReactDOM.render()渲染Hello组件：

ReactDOM.render(
    <Hello />, 
    document.getElementById("root")
);

将上面的代码放在<script type="text/babel">内，运行会得到如下结果:

数据处理

React中有两种数据类型：props和state。props是由外部的传入，不被组件控制。state是内部的，能够被组件改变

组件可以直接改变它的state，但不能直接改变它的props

Props

Hello组件不够灵活，它现在只能显示"hello world"。组件一个重要功能就是可以复用，比如显示不同文本。我们可以通过props实现

ReactDOM.render(
    <Hello message="my friend" />, 
    document.getElementById("root")
);

message就是一个prop，在Hello这个组件中，我们可以通过this.props.message得到prop的值。

class Hello extends React.Component {
    render() {
        return <h1>Hello {this.props.message}!</h1>;
    }
}

运行结果：

注意{this.props.message}, 我们加了一对花括号，表示这是一个JavaScript的表达式，不是一个纯文本，专业术语就是插值

现在我们就可以重用这个组件，显示不同的文本。

那么，如果我们想让Hello这个组件自己改变它的文本呢？我们可以使用state来实现。

State

组件另一种存储数据的方式是state。对于外部传进来的props，组件是没有能力直接改变的，而state是可以的。

如果你希望你应用中的数据可以被改变，比如说用户点击了一个按钮后可以显示另一段文本，那么这个数据必须存储在一个组件中。

初始化State

我们只要在组件的constructor()方法中调用this.state就能够完成state的初始化。在我们的例子中，state只有一个属性message。

class Hello extends React.Component {
    
    constructor(){
        super();
        this.state = {
            message: "my friend (from state)!"
        };
    }
    
    render() {
        return <h1>Hello {this.state.message}!</h1>;
    }
}

我们需要先调用super()这个方法，因为this是在super()调用之后才被初始化的。

改变状态

我们只需要调用this.setState()这个方法就可以改变状态，这里我们把它封装到一个updateMessage的方法。

class Hello extends React.Component {
    
    constructor(){
        super();
        this.state = {
            message: "my friend (from state)!"
        };
        this.updateMessage = this.updateMessage.bind(this);  // ！！！
   }
    updateMessage() {
        this.setState({
            message: "my friend (from changed state)!"
        });
    }    
    render() {
        return <h1>Hello {this.state.message}!</h1>;
    }
}

接下去我们创建一个按钮用来触发updateMessage()这个方法。我们可以修改下render()把按钮加进去：

render() {
  return (
     <div>
       <h1>Hello {this.state.message}!</h1>
       <button onClick={this.updateMessage}>Click me!</button>
     </div>   
  )
}

这里我们给按钮的点击事件onClick绑定了一个回调函数this.updateMessage。当点击按钮的时候，就会触发updateMessage这个方法。

下面是整个组件的所有代码：

class Hello extends React.Component {
    
    constructor(){
        super();
        this.state = {
            message: "my friend (from state)!"
        };
        this.updateMessage = this.updateMessage.bind(this);
    }
    updateMessage() {
        this.setState({
            message: "my friend (from changed state)!"
        });
    }
    render() {
         return (
           <div>
             <h1>Hello {this.state.message}!</h1>
             <button onClick={this.updateMessage}>Click me!</button>
           </div>   
        )
    }
}