React组件（函数式组件，类式组件）

函数式组件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>React Demo</title>  <!-- 引入React -->  <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>  <!-- 引入ReactDOM -->  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>  <!-- 引入Babel用于转换JSX（如果你不是通过构建工具如Webpack来转换的话） -->  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>  
</head>
<body><div id="test"></div> <script  type="text/babel">///1、函数式组件function Demo() {return  <h2>我是哈哈哈 适用于【简单组件】</h2>}// 2、渲染ReactDOM.render(<Demo/>,document.getElementById('test'))</script>
</body>
</html>

在这里插入图片描述

类式组件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>React Demo</title>  <!-- 引入React -->  <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>  <!-- 引入ReactDOM -->  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>  <!-- 引入Babel用于转换JSX（如果你不是通过构建工具如Webpack来转换的话） -->  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>  
</head>
<body><div id="test"></div> <script  type="text/babel">// 1、创建类式组件class MyDemo extends React.Component {//render是放在哪里的?- MyComponent的原型对象上，供实例使用。//render中的this是谁?- MyComponent的实例对象<=>MyComponent组件实例对象。render() {return <h2>我是嘻嘻，适用于【复杂组件】</h2>}}///2、渲染ReactDOM.render(<MyDemo/>,document.getElementById('test'))/*执行了ReactDoM.render(<Mycomponent/>.......之后，发生了什么?1.React解析组件标签，找到了MyComponent组件。2.发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法。3.将render返回的虚拟DOM转为真实DOM，随后呈现在页面中。*/</script>
</body>
</html>