React.creatElement()

用来创建一个React元素

参数:

第一个参数：元素名称（html标签必须小写，大写会被识别为组件名称）

第二个参数：元素的属性

• 设置属性时，需要改为驼峰命名（例如：onClick: () => {}）.
• 设置类名时，使用className代替class

第三个参数：元素的子元素（可设置多个）

使用示例

const vnode = React.createElement('h1', {className: 'myClass'}, '标签内容')

ReactDOM.createRoot()

用来创建根元素，需要一个dom元素作为参数

// public/index.html
<div id="root"></div>

ReactDOM.createRoot(document.getElementById('root'))

ReactDOM.render()

用于渲染react元素到页面上

const vnode = React.createElement('h1', {className: 'myClass'}, '标签内容')
const root = ReactDOM.createRoot(document.getElementById('root'))

// 将React.createElement()创建的元素渲染到ReactDOM.createRoot()创建的根节点上
ReactDOM.render(vnode, root)

注意：

• 老版本的render使用：ReactDOM.render(div, document.getElementById('root'))
• 重复调用render时，React会比较两次渲染的元素，只更新发生变化的部分（diff算法对比）