React入门
React开发的入门与学习
# 概念
React是一个JavaScript库。
React是一个用来构建界面的JavaScript库。
React是一个使用JSX语法、状态机制、生命周期等功能的JavaScript库。
使用React主要还是为了写组件，为了在下一个项目中使用到。难点在于数据流与组件之间的关系与影响。
# 使用
包括了如何开始项目与编辑项目
# 方法
常见的方法有这么几种：第一个是使用官方出的create-react-app脚手架；第二个是在本地引入React的静态资源库，直接书写；第三种是自己组织项目架构然后在node中跑服务。
# 脚手架
在node中引入脚手架：yarn add create-react-app，然后根据提示来即可。自带热更新！
目录中src存放着组件，但是由于刚开始学习，思路还没有转换过来，我把文件按照css/js/img来划分的，这样并没有实现组件化。
我想的合理的方法应该是把组件的css/js/img分开存放，再次调用的时候就能很方便的使用之前写的组件了。
另，这个项目是拿npm跑的，并没有yarn的yarn.lock等文件。
# 静态资源库
在html文件中引入react.js、react-dom.jd、browser.js，然后就算是搭起了环境。没有热更新，但是可以通过其他中间件来实现。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/react/15.6.1/react.js"></script>
<script src="https://cdn.bootcss.com/react/15.6.1/react-dom.js"></script>
<script src="http://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"></script>
</head>
<body>
<div id="reactContainer"></div>
<script type="text/babel">
var Text = React.createClass({
render:function(){
return (<div>Hello</div>)
}
});
ReactDOM.render(<Text/>,document.getElementById("reactContainer"));
</script>
</body>
</html>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
需要注意的有以下几点：
- type = "text/babel"
- return的DOM需要包在一个标签里
- JSX语法
# 热更新的方法
通过加入live-server中间件来实现自动更新。
yarn add -g live-server
live-server
live-server --port=4000
2
3
4
# 自组织
这个就比较复杂了，完全的自定目录结构。
感觉不是很方便。
# 开发环境(Sublime)
# HBuilder
没有对应插件，差评。
# VS Code
自带控制台，好评。
# Sublime
我安装了两个插件。
jsformat- 代码格式化Babel- 代码高亮
另：
jsformat可以配置为保存时立即整理格式，需要在Settings-user中输入以下代码
{
"e4x": true,
"format_on_save": true,
}
2
3
4
babel可以设置为默认
View - Syntax - Open all with··· - Babel - Javascript(Babel)
# 开发
写React组件可以使用简单的dom来实现，但是想要做更多的交互效果，还是需要使用React提供的各个知识点。
包括切换状态的State、组件外传入时使用的props、生命周期等。
# State
使用State的前提自然是要设置初始化状态。
getInitialState(){
return {
stateName:false
}
}
2
3
4
5
初始化好之后，就需要在不同的情况下对State进行设置。
this.setState({
stateName:!this.state.stateName
});
2
3
# Props
Props就是获取调用组件时传递的属性值。
let HelloBox=React.createClass({
render:function(){
return <div>{'Hello '+this.props.myattr}</div>;
}
})
ReactDOM.render(<HelloBox myattr="world"/>,document.getElementById("demo"));
2
3
4
5
6
一般，使用props来传递类名、颜色、回调等信息。
与State的区别在于Props在组件外进行修改，State在组件内部进行修改
还可以设置默认值！
getDefaultProps：function(){
return {
propName: propValue
}
}
2
3
4
5
# PropsTypes
Props的属性验证。
proTypes:{
propName: React.PropTypes.string.isRequired
}
//除了字符串验证，还有array、bool、func、number、object、symbol等等
2
3
4
5
# 生命周期
实例化阶段 -----> 活动阶段 -----> 销毁阶段
正在实例化时：componentWillMount()
实例化完成：componentDidMount()
正在被重新渲染时：componentWillupdate(object nextProps, object nextState)
重新渲染完成：componentDidupdate(object prevProps, object prevState)
正在被移除：componentWillUnmount()
# Demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ㄟ( ▔, ▔ )ㄏ </title>
<script src="https://cdn.bootcss.com/react/15.6.1/react.js"></script>
<script src="https://cdn.bootcss.com/react/15.6.1/react-dom.min.js"></script>
<script src="http://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"></script>
</head>
<body>
<div id="demo"></div>
<script type="text/babel">
var Hello = React.createClass({
getInitialState:function(){
return {
opacity:1.0,
left:0,
top:0
}
},
componentDidMount:function(){
setInterval(function(){
var opacity = this.state.opacity;
var left = this.state.left;
opacity -= 0.005;
if(opacity<0.1){
opacity = 1;
}
left += 1;
if( left >= document.body.clientWidth ){
left = 0;
}
this.setState({
opacity: opacity,
left: left
});
}.bind(this),10);
},
render:function(){
return (
<div style={{
opacity:this.state.opacity,
left:this.state.left+'px',
position:"fixed"
}}>
{this.props.name}
</div>
)
},
});
ReactDOM.render(
<Hello name="world" name='Demo'/>,
document.getElementById('demo')
)
</script>
</body>
</html>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
# 子属性
this.props.chilren的使用。
var List=React.createClass({
render:function(){
return(
<ul>{
React.Children.map(this.props.children,function(e){
return(<li>{e}</li>);
})
}</ul>
)
}
});
ReactDOM.render(
<List>
<span>1</span>
<span>2</span>
<span>3</span>
</List>
, document.getElementById("demo") );
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
实际上是把组件中的dom作为一个数组存放，在上面代码中，this.props.children的值为：
另，如果没有子节点，返回undfined;如果只有一个子节点，返回Object的值。
# ref
通过标记来获取真实的dom节点。
var InputBox = React.createClass({
handleClick:function(){
this.refs.input.focus();
},
render:function(){
return(
<div>
<input type="text" ref="input" />
<input type="button" onClick={this.handleClick}/>
</div>
)
}
});
ReactDOM.render(
<InputBox/>,
document.getElementById("demo")
)
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# Ajax
都说Fetch要秒杀Ajax，所以这里写个fetch的例子。
handleClick() {
const data = {
data1: "1"
};
const url = "/api/getUserList";
fetch(url, {
method: "POST",
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
body: data
})
.then(response => response.json())
.then(data => console.log(data))
.catch(e => console.log("报错信息：", e))
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16