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中调用时会被当成标签名并且报错（因为它不认识这个标签）
