标签：ntb 运行 create 技术分享 bsp 自动调用 this img babel
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 是会随着用户互动而产生变化的特性。
标签：ntb 运行 create 技术分享 bsp 自动调用 this img babel
原文地址：http://www.cnblogs.com/lijy/p/6855732.html
