react笔记之三个api方法之一

 <!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>三个API</title>
    <script src="script/react.development.js"></script>
    <script src="script/react-dom.development.js"></script>
</head>
<body>
<button id="btn">我是按钮</button>
<div id="root"></div>
 
<script>
    /*
    * React.createElement()
    *   - 用来创建一个React元素
    *   - 参数：
    *        1.元素的名称（html标签必须小写）
    *        2.标签中的属性
    *           - class属性需要使用className来设置
    *           - 在设置事件时，属性名需要修改为驼峰命名法
    *       3.元素的内容（子元素）
    *   - 注意点：
    *       React元素最终会通过虚拟DOM转换为真实的DOM元素
    *       React元素一旦创建就无法修改，只能通过新创建的元素进行替换
    *
    *
    * */
 
    // 创建一个React元素
    const button = React.createElement('button', {
        type: 'button',
        className: 'hello',
        onClick: () => {
            alert('你点我干嘛')
        }
    }, '点我一下');
 
    // 创建第一个div
    const div = React.createElement('div', {}, '我是一个div', button);
 
    // 获取根元素
    const root = ReactDOM.createRoot(document.getElementById('root'));
 
    // 将元素在根元素中显示
    root.render(div);
 
    // 获取按钮对象
    const btn = document.getElementById('btn');
    btn.addEventListener('click', ()=>{
        // 点击按钮后，修改div中button的文字为click me
        const button = React.createElement('button', {
            type: 'button',
            className: 'hello',
            onClick: () => {
                alert('你点我干嘛')
            }
        }, 'click me');
 
        // 创建一个div
        const div = React.createElement('div', {}, '我是一个div', button);
 
        // 修改React元素后，必须重新对根元素进行渲染
        // 当调用render渲染页面时，React会自动比较两次渲染的元素，只在真实DOM中更新发生变化的部分
        //      没发生变化的保持不变
        root.render(div);
    });
</script>
 
</body>
</html>

posted @ 2022-11-05 20:41 前端导师歌谣阅读(26) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· react笔记之三个api方法之一续

· react需要的三个文件

· 学习笔记（十三）：ArkUi-按钮 (Button)

· touch 事件

公告

昵称：前端导师歌谣
园龄： 7年3个月
粉丝： 9
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

前端导师歌谣的博客

微信公众号关注前端小歌谣每日分享前端知识

react笔记之三个api方法之一

公告

搜索

常用链接

最新随笔

我的标签

积分与排名

随笔分类

随笔档案

相册

阅读排行榜

推荐排行榜

	<!DOCTYPE html>
	<html lang="zh">
	<head>
	<meta charset="UTF-8">
	<title>三个API</title>
	<script src="script/react.development.js"></script>
	<script src="script/react-dom.development.js"></script>
	</head>
	<body>
	<button id="btn">我是按钮</button>
	<div id="root"></div>

	<script>
	/*
	* React.createElement()
	* - 用来创建一个React元素
	* - 参数：
	* 1.元素的名称（html标签必须小写）
	* 2.标签中的属性
	* - class属性需要使用className来设置
	* - 在设置事件时，属性名需要修改为驼峰命名法
	* 3.元素的内容（子元素）
	* - 注意点：
	* React元素最终会通过虚拟DOM转换为真实的DOM元素
	* React元素一旦创建就无法修改，只能通过新创建的元素进行替换
	*
	*
	* */

	// 创建一个React元素
	const button = React.createElement('button', {
	type: 'button',
	className: 'hello',
	onClick: () => {
	alert('你点我干嘛')
	}
	}, '点我一下');

	// 创建第一个div
	const div = React.createElement('div', {}, '我是一个div', button);

	// 获取根元素
	const root = ReactDOM.createRoot(document.getElementById('root'));

	// 将元素在根元素中显示
	root.render(div);

	// 获取按钮对象
	const btn = document.getElementById('btn');
	btn.addEventListener('click', ()=>{
	// 点击按钮后，修改div中button的文字为click me
	const button = React.createElement('button', {
	type: 'button',
	className: 'hello',
	onClick: () => {
	alert('你点我干嘛')
	}
	}, 'click me');

	// 创建一个div
	const div = React.createElement('div', {}, '我是一个div', button);

	// 修改React元素后，必须重新对根元素进行渲染
	// 当调用render渲染页面时，React会自动比较两次渲染的元素，只在真实DOM中更新发生变化的部分
	// 没发生变化的保持不变
	root.render(div);
	});
	</script>

	</body>
	</html>

前端导师歌谣的博客

微信公众号关注前端小歌谣 每日分享前端知识

react笔记之三个api方法之一

公告

搜索

常用链接

最新随笔

我的标签

积分与排名

随笔分类

随笔档案

相册

阅读排行榜

推荐排行榜

微信公众号关注前端小歌谣每日分享前端知识