同 angularJS、Vue一样，React 也是一种替换框架，采用JSX语法进行替换

react.min.js - React 的核心库

react-dom.min.js - 提供与 DOM 相关的功能

browser.min.js - 用于将 JSX 语法转为 JavaScript 语法

1、典型用法

入门例子

ReactDOM.render(

Hello, world!

,

document.getElementById('example')

);

过程：

I、使用框架 ReactDOM.render 方法操作dom

II、第一个参数时是 插入的 JSX 语法生成的元素 ；第二个参数是绑定 到的DOM的节点

如果要解析 JSX,则type 要设定为

JSX：类似 HTML + JS的语法，编译后进行了优化，效率更高

2、基础概念

I、表达式

ReactDOM.render(

{i == 1 ? 'True!' : 'False'}

,

document.getElementById('example')

);

和 angular和vue不同的是,没有采用双括号{{}}, 而使用单括号 {} 取值和表达式运算

II、逻辑控制

因为是类HTML的语法,所以没有设计 一些 指令,都是 API操作；事件，也是使用的js 的原生事件，没有封装

React 的 JSX 使用大、小写的约定来区分本地组件的类(自定义组件)和 HTML 标签

3、绑定

同angularJS和Vue不一样，React 没有绑定指令，所以他的绑定，是直接引用和操纵对象的状态(这个对象是 state，具体参照下面关于state的描述）

4、组件化

I、组件化的例子

var WebSite = React.createClass({

render: function() {

return (

);

}

});

var Name = React.createClass({

render: function() {

return (

{this.props.name}

);

}

});

var Link = React.createClass({

render: function() {

return (

{this.props.site}

);

}

});

React.render(

,

document.getElementById('example')

);

II、组件化的步骤

一、注册组件

通过 React.createClass 创建类，创建一个 自定义标签替换规则

固定属性 render 返回一个 HTML 模板

二、父控件(外层)向自定义组件(内层)传递数据

I、通过 this.props 传递数据

通过 getDefaultProps 获取默认数据

propTypes 属性可以校验传递的数据

II、操纵状态属性 state

React 把组件看成状态机，每个自定义组件,都会添加一个 state 对象

通过 this.state 可以获取state对象

通过 getInitialState 函数获取初始的 state对象 存储的数据

通过 this.setState 本对象的方法来设置 state对象 存储的数据

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 ? '喜欢' : '不喜欢';

return (

你{text}我。点我切换状态。

);

}

});

React.render(

,

document.getElementById('example')

);

state VS props

props 传递数据给子组件，不可变；state 因为可变，可以和用户交互

同angularJS和Vue相比，

5、组件 API 与生命周期

设置状态：setState

替换状态：replaceState

设置属性：setProps

替换属性：replaceProps

强制更新：forceUpdate

获取DOM节点：findDOMNode

判断组件挂载状态：isMounted

Mounting - 已经插入DOM

Updating - 正在重新渲染

Unmounint - 移除DOM

生命周期的方法 - 回调函数

componentWillMount

componentDidMount

componentWillReceiveProps

shouldComponentUpdate

componentWillUpdate

componentDidUpdate

componentWillUnmount

6、ref 属性

这个和 vue的 el属性类似，可以获取整个元素，这样可以方便的操作元素

var MyComponent = React.createClass({

handleClick: function() {

// 使用原生的 DOM API 获取焦点

this.refs.myInput.focus();

},

render: function() {

// 当组件插入到 DOM 后，ref 属性添加一个组件的引用于到 this.refs

return (

type="button"

value="点我输入框获取焦点"

onClick={this.handleClick}

/>

);

}

});

ReactDOM.render(

,

document.getElementById('example')

);

I、在需要操作的元素上，绑定 ref 属性

II、通过 react 组件对象的 this.refs 获取绑定的这个属性

后续可以对获取的元素，进行操作

7、综合应用

I、通过 state 属性，实现双向数据绑定 - 针对表单

var HelloMessage = React.createClass({

getInitialState: function() {

return {value: 'Hello Runoob!'};

},

handleChange: function(event) {

this.setState({value: event.target.value});

},

render: function() {

var value = this.state.value;

return

{value}

;

}

});

ReactDOM.render(

,

document.getElementById('example')

);

a、通过原生事件 onchange 监听，指定监听函数 handleChange

b、在监听事件 中 调用 this.setState 更新绑定数据 (通过event可以获取各种数据)

II、通过 state 和 props 属性，实现 内层触发外层更新数据

var Content = React.createClass({

render: function() {

return

点我

{this.props.myDataProp}

}

});

var HelloMessage = React.createClass({

getInitialState: function() {

return {value: 'Hello Runoob!'};

},

handleChange: function(event) {

this.setState({value: '菜鸟教程'})

},

render: function() {

var value = this.state.value;

return

updateStateProp = {this.handleChange}>

;

}

});

ReactDOM.render(

,

document.getElementById('example')

);

a、通过原生事件 onClick 监听，指定监听函数 为外层传递来的 属性 this.props.updateStateProp

b、外层传递到内层的 属性 updateStateProp 指定为自身的监听事件 this.handleChange

c、外层监听事件 中 调用 this.setState 更新绑定数据 (通过event可以获取各种数据)

外层传递到内层的 属性 updateStateProp

III、结合 ajax 请求，更新UI

React 组件的数据可以通过 componentDidMount 方法中的 Ajax 来获取，当从服务端获取数据库可以将数据存储在 state 中，再用 this.setState 方法重新渲染 UI。

var UserGist = React.createClass({

getInitialState: function() {

return {

username: '',

lastGistUrl: ''

};

},

componentDidMount: function() {

this.serverRequest = $.get(this.props.source, function (result) {

var lastGist = result[0];

this.setState({

username: lastGist.owner.login,

lastGistUrl: lastGist.html_url

});

}.bind(this));

},

// 这里的 bind(this) 是因为 function 里面使用了 this.setState,此时的this 指针并没有指向外层的class对象，.bind()创建了一个新函数(原先函数的拷贝)，当这个函数在被调用的时候，它的 this 关键词会被设置成被传入的值（这里指调用bind()时传入的参数）

componentWillUnmount: function() {

this.serverRequest.abort();

},

render: function() {

return (

{this.state.username} 用户最新的 Gist 共享地址：

{this.state.lastGistUrl}

);

}

});

ReactDOM.render(

{/* */}

,

mountNode

);