reactjs定义组件：函数式组件

分手后的思念是犯贱 2023-10-02 18:06 42阅读 0赞

执行了ReactDOM.render(…之后，发生了什么？  
1.React解析组件标签，找到了MyComponent组件。  
2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中。

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>1_函数式组件</title>
    </head>
    <body>
    	
    	<div id="test"></div>
    	
    	
    	<script type="text/javascript" src="../js/react.development.js"></script>
    	
    	<script type="text/javascript" src="../js/react-dom.development.js"></script>
    	
    	<script type="text/javascript" src="../js/babel.min.js"></script>
    
    	<script type="text/babel">
    		//1.创建函数式组件
    		function MyComponent(){
          
    			console.log(this); //此处的this是undefined，因为babel编译后开启了严格模式
    			return <h2>我是用函数定义的组件(适用于【简单组件】的定义)</h2>
    		}
    		//2.渲染组件到页面
    		ReactDOM.render(<MyComponent/>,document.getElementById('test'))
    		/* 
    			执行了ReactDOM.render(<MyComponent/>.......之后，发生了什么？
    					1.React解析组件标签，找到了MyComponent组件。
    					2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中。
    		*/
    	</script>
    </body>
    </html>

![在这里插入图片描述][24db77a20c7d4d5d8991b7012ec0a21c.png]

[24db77a20c7d4d5d8991b7012ec0a21c.png]: https://img-blog.csdnimg.cn/24db77a20c7d4d5d8991b7012ec0a21c.png

发表评论取消回复

表情：

评论列表（有 0 条评论，42人围观）

还没有评论，来说两句吧...

相关阅读

相关 reactjs函数式组件使用props属性代码示例

这段HTML代码是一个使用React函数组件的例子。首先引入了React和ReactDOM的核心库以及Babel和prop-types库。然后定义了一个名为Person的函数组

比眉伴天荒/ 2024年02月17日 13:35/ 0 赞/ 195 阅读

相关 reactjs类式组件代码示例

执行了`ReactDOM.render(<MyComponent/>.......`之后，发生了什么？ 1.React解析组件标签，找到了MyComponent组件。

末蓝、/ 2024年02月17日 13:17/ 0 赞/ 150 阅读

相关 reactjs函数式组件代码示例

如下展示了如何创建和渲染函数式组件的示例。首先，创建了一个名为MyComponent的函数式组件，并在JSX中使用。然后，使用ReactDOM.render函数将组件渲染到页面

青旅半醒/ 2024年02月17日 13:17/ 0 赞/ 237 阅读

相关 reactjs定义组件：类式组件

执行了ReactDOM.render(…之后，发生了什么？ 1.React解析组件标签，找到了MyComponent组件。 2.发现组件是使用类定义的，随后new出来该

朱雀/ 2023年10月02日 18:07/ 0 赞/ 157 阅读

相关 reactjs定义组件：函数式组件

执行了ReactDOM.render(…之后，发生了什么？ 1.React解析组件标签，找到了MyComponent组件。 2.发现组件是使用函数定义的，随后调用该函数

分手后的思念是犯贱/ 2023年10月02日 18:06/ 0 赞/ 43 阅读

相关 reactjs类式组件props的基本使用

![在这里插入图片描述][428b3bf6c9c845daa2d9b7bca919dc6b.png_pic_center] [428b3bf6c9c845daa2d9b7b

素颜马尾好姑娘i/ 2023年09月28日 17:37/ 0 赞/ 38 阅读

相关 React 定义函数式组件

react定义函数式组件的代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charse

女爷i/ 2023年01月04日 14:32/ 0 赞/ 347 阅读

相关 React —— 函数式组件和类式组件

React —— 函数式组件和类式组件 React —— 函数式组件和类式组件一、函数式组件二、类式组件 React —— 函数式

我不是女神ヾ/ 2022年11月07日 14:43/ 0 赞/ 302 阅读

相关函数式组件

函数式组件需要将functional设为true，它没有状态，没有上下文单文件中函数式组件的实现： <template functional> </tem

梦里梦外;/ 2022年04月08日 10:23/ 0 赞/ 362 阅读

相关 vue 渲染函数生成组件、函数式组件

1、创建 Vue.component('组件名', { render: function (createElement) { createEl

我不是女神ヾ/ 2021年07月24日 21:35/ 0 赞/ 947 阅读