React（六）：组件的两种创建方式
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>
