react笔记之三个api方法之一-阿里云开发者社区

react笔记之三个api方法之一

2023-02-09 96

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 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方法之一

热门文章

最新文章

相关课程

相关电子书

相关实验场景

探索云世界

热门

云计算

大数据

云原生

人工智能

数据库

开发与运维

活动广场

任务中心

训练营

直播

乘风者计划

下载

镜像站

技术资料

react笔记之三个api方法之一

热门文章

最新文章

相关课程

相关电子书

相关实验场景