JavaScript库 —

JavaScript库 — — React

React不支持IE6、IE7

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

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

一个实例：

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

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：

 1 var i = 1;
 2 
 3 // react 自动添加单位px
 4 var myStyle = {
 5     fontSize: 20,
 6     color: 'orange'
 7 };
 8 
 9 var arr = [
10     <h1>数组元素1</h1>,
11     <h2>数组元素2</h2>
12 ];
13 
14 // react 组件
15 var MyReactComponent = React.createClass({
16     render: function () {
17         return <h1>我是react组件，属性name的值：{this.props.name}</h1>;
18     }
19 }); // MyReactComponent 是组件名，组件名要求大写开头，否则会报错
20 
21 ReactDOM.render(
22     <div>
23         <h1>使用表达式</h1>
24         <h2>{1 + 1}</h2>
25         <p>{i = 1 ? 'true' : 'false'}</p>
26         <p data-myattribute="some_value">这是一个不错的JavaScript库</p>
27         <p style = {myStyle}>样式</p>
28         {/* 注释 */}
29         {/* JSX支持在模板中添加数组，数组会自动展开 */}
30         <div>{arr}</div>
31         {/* react 组件，直接在标签里引入组件名，组件类只能包含一个顶层标签，否则也会报错 */}
32         <MyReactComponent name='lqc_react' />
33     </div>,
34     document.getElementById('example')
35 );

代码2：

 1 /**
 2  * 编写一个符合组件
 3  * 要求：1.有大标题
 4  * 2.有链接，链接点击进入百度首页
 5  */
 6 
 7 var Name = React.createClass({
 8     render: function () {
 9         return <h1>{this.props.name}</h1>
10     }
11 });
12 
13 var Link = React.createClass({
14     render: function () {
15         return <a target='_blank' href={this.props.link}>{this.props.link}</a>
16     }
17 });
18 
19 var WebSite = React.createClass({
20     render: function () {
21         return (<div>
22                     <Name name={this.props.name} />
23                     <Link link={this.props.link} />
24                 </div>);
25     }
26 });
27 
28 ReactDOM.render(
29     <WebSite name='百度' link='http://www.baidu.com' />,
30     document.getElementById('example')
31 );

代码3：

 1 // 自定义 react 功能组件
 2 var Liked = React.createClass({
 3     // 设置默认状态，getInitialState() 是系统规定函数
 4     getInitialState: function () {
 5         return {liked: false};
 6     },
 7     // 自定义函数
 8     handleClick: function () {
 9         this.setState({liked: !this.state.liked});
10     },
11     render: function () {
12         var text = this.state.liked ? '喜欢' : '不喜欢';
13 
14         return (<p onClick = {this.handleClick}>
15             <b>{text}</b>
16             点击喜欢或不喜欢切换状态
17         </p>);
18     }
19 });
20 
21 // 渲染到 HTML DOM
22 ReactDOM.render(
23     <Liked />,
24     document.getElementById('example')
25 );

代码4：

 1 props：
 2 // 使用 props
 3 // 编写组件
 4 var HelloProps = React.createClass({
 5     // getDefaultProps() 设置默认 props 值
 6     getDefaultProps: function () {
 7         return {
 8             name: 'default'
 9         }
10     },
11     render: function () {
12         return (<p>名字为：{this.props.name}</p>);
13     }
14 });
15 
16 /**
17  * 渲染到 HTML DOM
18  */
19 ReactDOM.render(
20     <HelloProps name = 'realityName' />,
21     document.getElementById('example')
22 );

代码区：

  1 /****************************************/
  2 /**
  3  * 利用 state 和 props 建立一个 web 站点
  4  */
  5 var WebSite = React.createClass({
  6     getInitialState: function () {
  7         return {
  8             name: '百度',
  9             site: 'http://www.baidu.com'
 10         };
 11     },
 12     render: function () {
 13         return (<div>
 14                     <Name name = {this.state.name} />
 15                     <Site site = {this.state.site} />
 16                 </div>);
 17     }
 18 });
 19 
 20 var Name = React.createClass({
 21     render: function () {
 22         return (<h1>{this.props.name}</h1>);
 23     }
 24 });
 25 
 26 var Site = React.createClass({
 27     render: function () {
 28         return (<a href = {this.props.site}>{this.props.site}</a>);
 29     }
 30 });
 31 
 32 
 33 ReactDOM.render(
 34     <WebSite />,
 35     document.getElementById('example')
 36 );
 37 
 38 /**************************************************/
 39 
 40 /**
 41  * props 验证
 42  * @type {string}
 43  */
 44 var title = '标题';
 45 var title = 123;
 46 
 47 var MyComponent = React.createClass({
 48     propTypes: {
 49         title: React.PropTypes.string.isRequired
 50     },
 51     render: function () {
 52         return (<div>{this.props.title}</div>);
 53     }
 54 });
 55 
 56 ReactDOM.render(
 57     <MyComponent title = {title} />,
 58     document.getElementById('example')
 59 );
 60 
 61 
 62 /*****************************************************/
 63 
 64 // 设置点击次数
 65 var Counter = React.createClass({
 66     getInitialState: function () {
 67         return {
 68             count :0
 69         }
 70     },
 71     handleClick: function () {
 72         // 传入当前状态 state
 73         this.setState(function (state) {
 74             // 以键值对的方式重新赋值
 75             return {count: state.count + 1};
 76         });
 77     },
 78     render: function () {
 79         // 属性的方式调用函数不需要加括号
 80         return (<div>
 81                     <p onClick = {this.handleClick}>点击我</p>
 82                     <p>
 83                         您点击的次数为：{this.state.count}
 84                     </p>
 85                 </div>);
 86     }
 87 });
 88 
 89 ReactDOM.render(
 90     <Counter />,
 91     document.getElementById('example')
 92 );
 93 
 94 /*************************************************/
 95 
 96 /**
 97  * React Ajax 获取 GitHub 用户最新 gist 共享描述
 98  */
 99 
100 
101 var Gist = React.createClass({
102     getInitialState: function () {
103         return {
104             username: '',
105             lastGistUrl: ''
106         }
107     },
108     // 获取数据
109     componentDidMount: function () {
110         this.serverRequset = $.get(this.props.site, function (result) {
111             var getGist = result[0];
112             console.log(getGist);
113             this.setState({
114                 username: getGist.id,
115                 lastGistUrl: getGist.url
116             });
117             console.log(this);
118         }.bind(this));
119     },
120     //取消未完成的请求
121     componentWillUnmount: function () {
122         this.serverRequset.abort();
123     },
124     render: function () {
125         return (<div>
126                     <p>用户名：{this.state.username}</p>
127                     <p>密码：{this.state.lastGistUrl}</p>
128                 </div>);
129     }
130 });
131 
132 ReactDOM.render(
133     <Gist site = 'https://api.github.com/users/octocat/gists' />,
134     document.getElementById('example')
135 );
136 
137 /************************************************************/
138 
139 /**
140  * 输入框更新 state
141  */
142 
143 var Message = React.createClass({
144     getInitialState: function () {
145         return {
146             value: 'hello message'
147         };
148     },
149     handleChange: function (event) {
150         this.setState({
151             value: event.target.value
152         });
153     },
154     render: function () {
155         return (
156             <div>
157                 <input type='text' onChange={this.handleChange} value={this.state.value} />
158                 <p>{this.state.value}</p>
159             </div>
160         );
161     }
162 });
163 
164 ReactDOM.render(
165     <Message />,
166     document.getElementById('example')
167 );
168 
169 
170 /***********************************************************************/
171 /**
172  * 子组件上使用表单
173  */
174 var Content = React.createClass({
175     render: function () {
176         return (<div>
177                     <input type = "text" value = {this.props.myData} onChange = {this.props.updateValue} />
178                     <h4>{this.props.myTips}</h4>
179                 </div>);
180     }
181 });
182 
183 var FormChange = React.createClass({
184     getInitialState: function () {
185         return {
186             value: 'hello message'
187         }
188     },
189     handleChange: function (event) {
190         this.setState({
191             value: event.target.value
192         });
193     },
194     render: function () {
195         return (<Content updateValue = {this.handleChange} myData = {this.state.value} myTips = {this.state.value} />);
196     }
197 });
198 
199 ReactDOM.render(
200     <FormChange />,
201     document.getElementById('example')
202 );
203 
204 /*******************************************************************/
205 
206 /**
207  * 点我改变文字内容
208  */
209 var Content = React.createClass({
210     render: function () {
211         return (<div>
212                     <button onClick = {this.props.changeData}>点我改变文字内容</button>
213                     <b>{this.props.myData}</b>
214                 </div>);
215     }
216 });
217 
218 var ChangeText = React.createClass({
219     getInitialState: function () {
220         return {
221             value: '默认值'
222         };
223     },
224     handleClick: function (event) {
225         this.setState({value : '百度'});
226     },
227     render: function () {
228         return (<Content myData = {this.state.value} changeData = {this.handleClick} />);
229     }
230 });
231 
232 ReactDOM.render(
233     <ChangeText />,
234     document.getElementById('example')
235 );
236 
237 /*****************************************************/
238 
239 /**
240  * 点击按钮触发输入框获得焦点
241  * this.refs 获取组件的引用
242  * 使用 this 来获取当前的 react 组件
243  */
244 
245 var MyComponent = React.createClass({
246     handleClick: function () {
247         this.refs.myInput.focus();
248     },
249     render: function () {
250         return (
251             <div>
252                 <button onClick = {this.handleClick}>点击我，输入框获得焦点</button>
253                 <input type = "text"
254                        ref = "myInput"
255                 />
256             </div>
257         );
258     }
259 });
260 
261 ReactDOM.render(
262     <MyComponent />,
263     document.getElementById('example')
264 );