JavaScript库 — — React

React不支持IE6、IE7

React是什么？
用于构建用户界面的JAVASCRIPT库，是MVC中的V（视图）。

React特点：
1. 声明式设计
2. 减少与DOM的交互，高效
3. JSX - JSX是JavaScript语法的扩展。React 开发不一定使用JSX，但建议使用它
4. 构建组件，方便应用在大项目中
5. 单向响应的数据流

一个实例：

//把Hello, world输入到#example中
ReactDOM.render(
<h1>Hello, world</h1>,
document.getElementById('example')
);

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

通过 npm 使用 React
参考：http://www.runoob.com/react/react-install.html

webstorm不支持babel的解决办法：
把引入的script库browser换成JSXTransformer，然后把type类型改为：text/jsx ，最后再把JavaScript版本修改为JSX Harmony就ok了。

JSX 就是 JavaScript

React 组件

React State 状态

getInitialState: 定义初始状态
handleClick: 程序自定义方法
render:
this.setState 修改状态值
this.state 当前状态值

React props （小道具）
state 可改变，容器组件里用的比较多
props 是不可变的
props：在容器里提取属性，比如：this.props.name 提取name的属性值

getDefaultProps() 设置默认 props 值

props 验证（不管用）
propTypes
React.PropTypes

React 组件 API
setState 设置状态 this.setState(fn/key: value) 最重要
replaceState 替换状态
setProps 设置属性
replaceProps 替换属性
forceUpdate 强制更新 尽量避免使用
getDOMNode 获取DOM节点
isMounted 判断组件挂载状态

组件API查询网址：
http://itbilu.com/javascript/react/EkACBdqKe.html

React 组件的生命周期
三个状态：
1. Mounting 已插入真实DOM
2. Updating 正在被重新渲染
3. Unmounting 已移出真实DOM

生命周期方法：
componentWillMount 渲染前调用
componentDidMount 第一次渲染调用，只在客户端，可以通过 this.getDOMNode() 进行访问，
如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)。

......

官方文档：
http://facebook.github.io/react/docs/component-specs.html#lifecycle-methods

React Ajax

React 表单与事件

this.refs 获取组件的引用

代码1：

var i = 1;

// react 自动添加单位px
var myStyle = {
fontSize: 20,
color: 'orange'
};

var arr = [
<h1>数组元素1</h1>,
<h2>数组元素2</h2>
];

// react 组件
var MyReactComponent = React.createClass({
render: function () {
return <h1>我是react组件，属性name的值：{this.props.name}</h1>;
}
}); // MyReactComponent 是组件名，组件名要求大写开头，否则会报错

ReactDOM.render(
<div>
<h1>使用表达式</h1>
<h2>{1 + 1}</h2>
<p>{i = 1 ? 'true' : 'false'}</p>
<p data-myattribute="some_value">这是一个不错的JavaScript库</p>
<p style = {myStyle}>样式</p>
{/* 注释 */}
{/* JSX支持在模板中添加数组，数组会自动展开 */}
<div>{arr}</div>
{/* react 组件，直接在标签里引入组件名，组件类只能包含一个顶层标签，否则也会报错 */}
<MyReactComponent name='lqc_react' />
</div>,
document.getElementById('example')
);

代码2：

/**
* 编写一个符合组件
* 要求：1.有大标题
* 2.有链接，链接点击进入百度首页
*/

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

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

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

ReactDOM.render(
<WebSite name='百度' link='http://www.baidu.com' />,
document.getElementById('example')
);

代码3：

// 自定义 react 功能组件
var Liked = React.createClass({
// 设置默认状态，getInitialState() 是系统规定函数
getInitialState: function () {
return {liked: false};
},
// 自定义函数
handleClick: function () {
this.setState({liked: !this.state.liked});
},
render: function () {
var text = this.state.liked ? '喜欢' : '不喜欢';

return (<p onClick = {this.handleClick}>
<b>{text}</b>
点击喜欢或不喜欢切换状态
</p>);
}
});

// 渲染到 HTML DOM
ReactDOM.render(
<Liked />,
document.getElementById('example')
);

代码4：

props：
// 使用 props
// 编写组件
var HelloProps = React.createClass({
// getDefaultProps() 设置默认 props 值
getDefaultProps: function () {
return {
name: 'default'
}
},
render: function () {
return (<p>名字为：{this.props.name}</p>);
}
});

/**
* 渲染到 HTML DOM
*/
ReactDOM.render(
<HelloProps name = 'realityName' />,
document.getElementById('example')
);

代码区：

/****************************************/
/**
* 利用 state 和 props 建立一个 web 站点
*/
var WebSite = React.createClass({
getInitialState: function () {
return {
name: '百度',
site: 'http://www.baidu.com'
};
},
render: function () {
return (<div>
<Name name = {this.state.name} />
<Site site = {this.state.site} />
</div>);
}
});

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

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

ReactDOM.render(
<WebSite />,
document.getElementById('example')
);

/**************************************************/

/**
* props 验证
* @type {string}
*/
var title = '标题';
var title = 123;

var MyComponent = React.createClass({
propTypes: {
title: React.PropTypes.string.isRequired
},
render: function () {
return (<div>{this.props.title}</div>);
}
});

ReactDOM.render(
<MyComponent title = {title} />,
document.getElementById('example')
);

/*****************************************************/

// 设置点击次数
var Counter = React.createClass({
getInitialState: function () {
return {
count :0
}
},
handleClick: function () {
// 传入当前状态 state
this.setState(function (state) {
// 以键值对的方式重新赋值
return {count: state.count + 1};
});
},
render: function () {
// 属性的方式调用函数不需要加括号
return (<div>
<p onClick = {this.handleClick}>点击我</p>
<p>
您点击的次数为：{this.state.count}
</p>
</div>);
}
});

ReactDOM.render(
<Counter />,
document.getElementById('example')
);

/*************************************************/

/**
* React Ajax 获取 GitHub 用户最新 gist 共享描述
*/

var Gist = React.createClass({
getInitialState: function () {
return {
username: '',
lastGistUrl: ''
}
},
// 获取数据
componentDidMount: function () {
this.serverRequset = $.get(this.props.site, function (result) {
var getGist = result[0];
console.log(getGist);
this.setState({
username: getGist.id,
lastGistUrl: getGist.url
});
console.log(this);
}.bind(this));
},
//取消未完成的请求
componentWillUnmount: function () {
this.serverRequset.abort();
},
render: function () {
return (<div>
<p>用户名：{this.state.username}</p>
<p>密码：{this.state.lastGistUrl}</p>
</div>);
}
});

ReactDOM.render(
<Gist site = 'https://api.github.com/users/octocat/gists' />,
document.getElementById('example')
);

/************************************************************/

/**
* 输入框更新 state
*/

var Message = React.createClass({
getInitialState: function () {
return {
value: 'hello message'
};
},
handleChange: function (event) {
this.setState({
value: event.target.value
});
},
render: function () {
return (
<div>
<input type='text' onChange={this.handleChange} value={this.state.value} />
<p>{this.state.value}</p>
</div>
);
}
});

ReactDOM.render(
<Message />,
document.getElementById('example')
);

/***********************************************************************/
/**
* 子组件上使用表单
*/
var Content = React.createClass({
render: function () {
return (<div>
<input type = "text" value = {this.props.myData} onChange = {this.props.updateValue} />
<h4>{this.props.myTips}</h4>
</div>);
}
});

var FormChange = React.createClass({
getInitialState: function () {
return {
value: 'hello message'
}
},
handleChange: function (event) {
this.setState({
value: event.target.value
});
},
render: function () {
return (<Content updateValue = {this.handleChange} myData = {this.state.value} myTips = {this.state.value} />);
}
});

ReactDOM.render(
<FormChange />,
document.getElementById('example')
);

/*******************************************************************/

/**
* 点我改变文字内容
*/
var Content = React.createClass({
render: function () {
return (<div>
<button onClick = {this.props.changeData}>点我改变文字内容</button>
<b>{this.props.myData}</b>
</div>);
}
});

var ChangeText = React.createClass({
getInitialState: function () {
return {
value: '默认值'
};
},
handleClick: function (event) {
this.setState({value : '百度'});
},
render: function () {
return (<Content myData = {this.state.value} changeData = {this.handleClick} />);
}
});

ReactDOM.render(
<ChangeText />,
document.getElementById('example')
);

/*****************************************************/

/**
* 点击按钮触发输入框获得焦点
* this.refs 获取组件的引用
* 使用 this 来获取当前的 react 组件
*/

var MyComponent = React.createClass({
handleClick: function () {
this.refs.myInput.focus();
},
render: function () {
return (
<div>
<button onClick = {this.handleClick}>点击我，输入框获得焦点</button>
<input type = "text"
ref = "myInput"
/>
</div>
);
}
});

ReactDOM.render(
<MyComponent />,
document.getElementById('example')
);