react中组件有两种，函数式组件及类式组件，下面将简单记录下函数式组件的学习
函数式组件的定义就如同他的名字一样，直接定义一个函数就行
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 <meta name="viewport" content="width=device-width, initial-scale=1.0">
8 <title>函数式组件</title>
9 <link rel="shortcut icon" href="../favicon.ico">
10 </head>
11
12 <body>
13 <div class="test"></div>
14 <!-- 引入react -->
15 <script type="text/javascript" src="../js/react.development.js"></script>
16 <!-- 引入react-dom -->
17 <script type="text/javascript" src="../js/react-dom.development.js"></script>
18 <!-- 引入babel -->
19 <script type="text/javascript" src="../js/babel.min.js"></script>
20 <!-- 注意此处type为babel -->
21 <script type="text/babel">
22 //1.创建函数式组件
23 //首字母必须大写
24 function Demo() {
25 console.log(this)//此处的this是undefined，因为babel编译后开启了严格模式
26 //函数必须有返回值
27 return <h2>我是用函数定义的组件，使用于简单组件的定义</h2>
28 }
29 //2.渲染组件到页面
30 //render参数必须写组件标签·
31 ReactDOM.render(<Demo />, document.querySelector('.test'))
32 // ReactDOM.render(Demo(), document.querySelector('.test'))
33
34 /*
35 执行了ReactDOM.render(<Demo />...之后，发生了什么
36 1.React解析组件标签，找到了Demo组件
37 2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM 转为真实DOM，随后呈现在页面上
38 */
39 </script>
40
41 </body>
42
43 </html>
需要注意的是组件的名字一定要以大写字母开头，否则在ReactDOM中调用时会被当成标签名并且报错（因为它不认识这个标签）