react--学习笔记3（面向组件编程）

Dear 丶 2023-03-02 10:18 19阅读 0赞

# 一、React面向组件编程 #

### ** 注意：** ###

*  组件名必须首字母大写
 *  虚拟DOM元素只能有一个根元素
 *   虚拟DOM元素必须有结束标签
 *  面向对象----》面向模块-----》面向组件

![20200728174638497.png][]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>组件编程</title>
    	</head>
    	<body>
    		<div id="test1"></div>
    		<div id="test2"></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">
    			//创建虚拟dom
    			//方式1: 工厂函数组件(简单组件)因为它不包含状态组件
    			function MyCompent(){
    				return <h2>工厂函数组件(简单组件)</h2>
    			}
    			//方式2:  ES6类组件(复杂组件)
    			class MyCompent2 extends React.Component{
    				render(){
    					return <h2>ES6类组件(复杂组件)</h2>
    				}
    			}
    			//渲染虚拟dom
    			ReactDOM.render(<MyCompent />, document.getElementById('test1'));
    			ReactDOM.render(<MyCompent2 />, document.getElementById('test2'))
    		</script>
    	</body>
    </html>

[20200728174638497.png]: /images/20230208/eb924ac3ba214a50833a1dbff37067bf.png

发表评论取消回复

表情：

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

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

相关阅读

相关 react--学习笔记3（面向组件编程）

一、React面向组件编程注意：组件名必须首字母大写虚拟DOM元素只能有一个根元素虚拟DOM元素必须有结束标签面向对象----

Dear 丶/ 2023年03月02日 10:18/ 0 赞/ 20 阅读

相关 react--学习笔记5（组件组合）

组件组合：功能界面的组件化编码流程: 1. 拆分组件: 拆分界面,抽取组件 2. 实现静态组件: 使用组件实现静态页面效果 3. 实现动态组件

落日映苍穹つ/ 2022年11月25日 04:29/ 0 赞/ 229 阅读

相关学习笔记——react公共组件与组件跳转

-------------------- > 在react中，除了页面级组件以外，我们有时还需要一些公共的组件，这些组件会被一个或多个页面级组件使用。例如导航组件和控制数量加

ゝ一纸荒年。/ 2022年11月22日 05:30/ 0 赞/ 247 阅读

相关 React（3）-创建组件

代码示例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" />

╰+哭是因爲堅強的太久メ/ 2022年11月01日 10:47/ 0 赞/ 155 阅读

相关 ② React 面向组件编程(state、props、refs)、事件处理

查看专栏其它文章： [① React 介绍及JSX简单使用][React _JSX] -------------------- React 组件的理解

深藏阁楼爱情的钟/ 2022年10月28日 14:22/ 0 赞/ 199 阅读

相关 React 面向组件编程

React 面向组件编程 [尚硅谷 2021 版 React 技术全家桶全套完整版（零基础入门到精通/男神天禹老师亲授）][2021 _ React] `React D

迷南。/ 2022年10月17日 04:24/ 0 赞/ 138 阅读

相关 React 开源组件笔记

React 开源组件笔记 > 开源组件react-native-camera [推荐一个跨平台的rn-camera-roll][rn-camera-roll]: —->

系统管理员/ 2022年09月23日 13:59/ 0 赞/ 226 阅读

相关 React学习：ref调用、组件封装调用-学习笔记

文章目录 React学习：ref调用、组件封装调用-学习笔记 ref调用-string形式 ref调用-回调形式（官

红太狼/ 2022年08月29日 10:53/ 0 赞/ 244 阅读

相关 React学习 -- 组件

React组件可以被描述成JSON对象，这就意味着，开发者可以通过方法或类来构建组件。React组件基本上由三部分组成：属性props，状态state和生命周期方法。 Rea

悠悠/ 2022年06月17日 12:45/ 0 赞/ 217 阅读

相关 React 学习笔记 - 组件基础

组件创建组件的方式 1. createClass 最原始的方法，现在已经在 v16+ 移除 // v16已经移

秒速五厘米/ 2022年01月19日 01:43/ 0 赞/ 256 阅读