1.函数式组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>函数式组件</title>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<!-- Don't use this in production: -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<!-- 准备一个容器 -->
<div id="test"></div>
</body>
<script type="text/babel">
//定义函数式组件
function MyComponent() {
console.log(this) //此处打印的是undefined，因为babel开启了严格模式，this不再指向windows
return (
<div>
<h1>
<span>我是一个【函数式组件】,适用于【简单组件】的定义</span>
</h1>
</div>
)
}
//react渲染
ReactDOM.render(<MyComponent />, document.getElementById("test"))
/*
React是如何执行函数式组件的呢？
1.React解析组件标签，找到了MyComponent组件
2.发现组件是是使用函数式定义的，首先去执行函数，拿到返回的虚拟DOM，将其转化为真实DOM展示在页面上
*/
</script>
</html>
2.类组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>类组件</title>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<!-- Don't use this in production: -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<!-- 准备一个容器 -->
<div id="test"></div>
</body>
<script type="text/babel">
//定义类组件
class MyComponent extends React.Component {
//Q：render在哪里？A：在MyComponent的原型对象上，供它的实例对象使用
render() {
//Q：这里的this是谁？A：是MyComponent对应的实例对象
console.log(this)
return (
<div>
<h1>
<span>我是一个【类式组件】,适用于【复杂组件】的定义</span>
</h1>
</div>
)
}
}
//react渲染
ReactDOM.render(<MyComponent />, document.getElementById("test"))
/*
1.类组件的使用
（1）必须继承React.Component类
（2）必须有render()方法，且返回一个虚拟DOM
2.React是如何执行类式组件的呢？
（1）React解析组件标签，找到了MyComponent组件
（2）发现组件是是使用类式定义的，首先去定义一个对应类的实例对象，然后执行实例对象的render方法
（3）拿到方法返回的虚拟DOM，转化为真实DOM展示在页面上
*/
</script>
</html>
标签：定义,render,DOM,创建,React,MyComponent,组件 From： https://www.cnblogs.com/jmsstudy/p/17591361.html