React 精华一页纸

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

react.min.js - React 的核心库
react-dom.min.js - 提供与 DOM 相关的功能
browser.min.js - 用于将 JSX 语法转为 JavaScript 语法

1、典型用法

---

入门例子
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);

过程：

I、使用框架 ReactDOM.render 方法操作dom
II、第一个参数时是 插入的 JSX 语法生成的元素 ；第二个参数是绑定 到的DOM的节点
如果要解析 JSX,则type 要设定为 <script type="text/babel">

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

2、基础概念

---

I、表达式
ReactDOM.render(
<div>
<h1>{i == 1 ? 'True!' : 'False'}</h1>
</div>
,
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 (
<div>
<Name name={this.props.name} />
<Link site={this.props.site} />
</div>
);
}
});

var Name = React.createClass({
render: function() {
return (
<h1>{this.props.name}</h1>
);
}
});

var Link = React.createClass({
render: function() {
return (
<a href={this.props.site}>
{this.props.site}
</a>
);
}
});

React.render(
<WebSite name="菜鸟教程" site=" http://www.runoob.com" />,
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 (
<p onClick={this.handleClick}>
你<b>{text}</b>我。点我切换状态。
</p>
);
}
});

React.render(
<LikeButton />,
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 (
<div>
<input type="text" ref="myInput" />
<input
type="button"
value="点我输入框获取焦点"
onClick={this.handleClick}
/>
</div>
);
}
});

ReactDOM.render(
<MyComponent />,
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 <div>
<input type="text" value={value} onChange={this.handleChange} />
<h4>{value}</h4>
</div>;
}
});
ReactDOM.render(
<HelloMessage />,
document.getElementById('example')
);

a、通过原生事件 onchange 监听，指定监听函数 handleChange
b、在监听事件 中 调用 this.setState 更新绑定数据 (通过event可以获取各种数据)

II、通过 state 和 props 属性，实现 内层触发外层更新数据
var Content = React.createClass({
render: function() {
return <div>
<button onClick = {this.props.updateStateProp}>点我</button>
<h4>{this.props.myDataProp}</h4>
</div>
}
});
var HelloMessage = React.createClass({
getInitialState: function() {
return {value: 'Hello Runoob!'};
},
handleChange: function(event) {
this.setState({value: '菜鸟教程'})
},
render: function() {
var value = this.state.value;
return <div>
<Content myDataProp = {value}
updateStateProp = {this.handleChange}></Content>
</div>;
}
});
ReactDOM.render(
<HelloMessage />,
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 (
<div>
{this.state.username} 用户最新的 Gist 共享地址：
<a href={this.state.lastGistUrl}>{this.state.lastGistUrl}</a>
</div>
);
}
});

ReactDOM.render(
{/* */}
<UserGist source="https://api.github.com/users/octocat/gists" />,
mountNode
);