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 );
以上是 JavaScript库 — — React 的全部内容， 来源链接： utcz.com/z/384399.html
