02-React
组
件
- 1
02-React
组
件
⼀
、
React
组
件
概
述
⼆
、
React
组
件
分
类
三
、
React
组
件
⼊
⻔
程
序
1
、
函
数
式
组
件
HTML
React
组
件
：
All In JavaScript
Vue
组
件
：
HTML + CSS + JavaScript
React
组
件
：
函
数
式
组
件
、
类
式
组
件
函
数
式
组
件
：
通过
⽅
法
定
义
组
件
【
⼀
般
⽤
于
简
单
的
组
件
】
类
式
组
件
：
通过
类
定
义
组
件
【
⼀
般
⽤
于
复
杂
的
组
件
】
⽬
前
开
发
公
司
慢慢
要
从
类
式
组
件
转
变
成
函
数
式
组
件
1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=
1.0">
02-React
组
件
- 2
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
<title>Document</title>
<script src="../public/js/react.development.js"></script>
<script src="../public/js/react-dom.development.js"></script>
<script src="../public/js/babel.min.js"></script>
</head>
<body>
<div id="app">
</div>
<script type="text/babel">
// let VDOM = <h1></h1>
// 定义组件
// 方法名：组件名称
// 组件名称命名规范：首字母大写
function MyFunctionComponent() {
// return：返回的是jsx
return (
<div>
<h1>太子饿了，要吃外卖</h1>
</div>
)
}
// 渲染
// ReactDOM.render(<MyFunctionComponent></MyFunctionComponent
>,document.getElementById('app'));
ReactDOM.render(<MyFunctionComponent />, document.getElementB
yId('app'));
</script>
</body>
</html>
02-React
组
件
- 3
1.1
、
this
问题
HTML
当
script
标
签
设
置
了
type：text/babel
，
会
⾃
动
设
置
严格模式
，
因
此
函数式组
件
就
处
于
严
格
模
式
下，
所
以
this
输
出
undefined
1
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=
1.0">
<title>Document</title>
<script src="../public/js/react.development.js"></script>
<script src="../public/js/react-dom.development.js"></script>
<script src="../public/js/babel.min.js"></script>
</head>
<body>
<div id="app">
</div>
<!-- 如果type设置了text/babel，那么默认帮我们设置了严格模式 -->
<script type="text/babel">
// let VDOM = <h1></h1>
// 定义组件
// 方法名：组件名称
// 组件名称命名规范：首字母大写
function MyFunctionComponent() {
02-React
组
件
- 4
2
、
类
式
组
件
HTML
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
// 如果在函数中输出的this是undefined，那么该代码处于严格模式下
console.log(this); // undefined
// return：返回的是jsx
return (
<div>
<h1>太子饿了，要吃外卖</h1>
</div>
)
}
// 渲染
// ReactDOM.render(<MyFunctionComponent></MyFunctionComponent
>,document.getElementById('app'));
ReactDOM.render(<MyFunctionComponent />, document.getElementB
yId('app'));
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=
1.0">
<title>Document</title>
<script src="../public/js/react.development.js"></script>
<script src="../public/js/react-dom.development.js"></script>
<script src="../public/js/babel.min.js"></script>
02-React
组
件
- 5
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
</head>
<body>
<div id="app">
</div>
<script type="text/babel">
// 定义类式组件
// 想要让一个普通类变成类式组件，那么该类必须继承React.Component类
// 当一个类继承了React.Component，那么该类就继承了React.Component
中的属性和方法
class MyClassComponent extends React.Component {
// 返回jsx render()：从React.Component中继承过来的
render() {
return (
<div>
<h1>这是类式组件</h1>
</div>
)
}
}
// 渲染
// render
ReactDOM.render(<MyClassComponent/>,document.getElementById(
'app'));
</script>
</body>
</html>
