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')
 );