从0开始学习React-1-React的三个API从0学习React18第一学，记录自己学习React18的道路，从基础

react介绍

React 是一个用于渲染用户界面 (UI) 的 JavaScript 库

React.createElement()

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

使用React创建一个div插入到页面

// 使用React.createElement创建一个div元素
const div = React.createElement('div', {}, '我是一个div');
// 使用ReactDom.createRoot得到根元素的React元素
const root = ReactDom.createRoot(document.getElementById('root'));
// 使用根元素将div渲染到页面中
root.render(div)

使用React创建一个buttn并修改

<!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>
    const button = React.createElement('button', {
        id: 'btn1',
        className: 'hello',
        onClick: () => {
            console.log('123')
        }
    }, '我是一个div')
    const root = ReactDOM.createRoot(document.getElementById('root'))
    root.render(button)

    const btn = document.getElementById('btn')
    /*
        从chrome控制台Element选项卡可以看到，在点击事件触发后，只有button按钮刷新了
    */
    btn.addEventListener('click', () => {
        const button = React.createElement('button', {
            id: 'btn1',
            className: 'hello',
            onClick: () => {
                console.log('123')
            }
        }, '我是一个div~~~')
        root.render(button)
    })
</script>

</body>
</html>

ReactDOM.createRoot() 和 root.render()

const div = React.createElement('div', {}, '我是div')
// 得到根元素对应的React元素
const root = ReactDOM.createRoot(document.getElementById('root'))
/*
* root.render
*   + 用来将React元素渲染到根元素中
*   + 会替换根元素中原有的元素
*   + 多次调用render，会对生成的React元素进行对比，只修改有变化的元素，最小化更新dom
* */
root.render(div)

// React18之前，获取根元素和渲染是合并在一起的，但是我们应该使用最新版本api
// ReactDOM.render(div, document.getElementById('root'))