React 基础

1 ReactDom.render()

将虚拟组件插入真实组件root中。

import React from ‘react‘;
import {render} from ‘react-dom‘;

render(<h1>Hello, React!</h1>, document.getElementById(‘root‘));

了解react，首先要认识的是该方法，也是react最基本的一个方法。

2 JSX语法

react用的是JSX语法，JavaScript 代码中可以写 HTML 代码，js代码用｛｝包含。

JSX 语法的最外层，只能有一个节点

// 错误
var myTitle = <p>Hello</p><p>World</p>;
// 正确
var myTitle = <p>Hello World</p>;

JSX 语法中可以插入 JavaScript 代码，使用大括号

var myTitle = <p>{‘Hello ‘ + ‘World‘}</p>

3 Babel转码

JavaScript 引擎（包括浏览器和 Node）都不认识 JSX，需要首先使用 Babel 转码，然后才能运行。

4 创建组件

有两种方式创建组件

方法一（createClass方法）：

var MyTitle = React.createClass({
    getDefaultProps: function () {
        return {
            title: ‘Hello getDefaultProps‘
        };
    },
    render: function() {
        return <h1> {this.props.title} </h1>;
    }
});

方法二（ES6方法）：

5 组件的属性

import React from ‘react‘;
import {render} from ‘react-dom‘;

class MyTitle extends React.Component {
    render(){
        return <h1>hello {this.props.name}</h1>;
    }
};

render(<MyTitle name="larry"/>, document.getElementById("root"));

组件的用法与原生的 HTML 标签完全一致，可以任意加入属性，比如 < MyTitle name="larry"> ，就是 MyTitle组件加入一个 name 属性，值为 larry。

组件的属性可以在组件类的 this.props 对象上获取，比如 name 属性就可以通过 this.props.name 读取。上面代码的运行结果如下。

6 组件的状态

组件免不了要与用户互动，React 的一大创新，就是将组件看成是一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染 UI。

var LikeButton = React.createClass({
    getInitialState: function() {
        return {liked: false};
    },
    handleClick: function(event) {
        this.setState({liked: !this.state.liked});
    },
    render: function() {
        var text = this.state.liked ? ‘like‘ : ‘haven\‘t liked‘;
        return (
            <p onClick={this.handleClick}>
                You {text} this. Click to toggle.
            </p>
        );
    }
});

上面代码创建了一个 LikeButton 组件，它的 getInitialState 方法用于定义初始状态，也就是一个对象，这个对象可以通过 this.state 属性读取。

当用户点击组件，导致状态变化，this.setState 方法就修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件。

由于 this.props 和 this.state 都用于描述组件的特性，可能会产生混淆。

一个简单的区分方法是，this.props 表示那些一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性。