DOM操作：React中方法和JS原生方法对比

一、JS原生操作DOM

1. 获取需要操作的父元素
2. 创建子元素
3. 对子元素的属性进行赋值
4. 将子元素挂在到父元素下

const parent_Element = document.getElementByid('ID_tag')；//获取父元素

child = document.createElement('div');//创建子元素

child.innerHTML = '这是一个子元素';//设置子元素内容

parent_Element.appendChild(child);//将子元素添加到父元素中

二、React通过虚拟DOM操作真实DOM

为了更好的区分，延续React官方的词藻。将虚拟DOM转换为真实DOM过程叫做渲染（render）；真实DOM在浏览器“着色”的过程叫做painting。见下图。

1. 获取真实DOM根节点
2. 在虚拟DOM中创建对应的ReactNode根节点（根容器，container）
3. 调用 root.render 以将一段 JSX（“React 节点”）在 React 的根节点中渲染为 DOM 节点并在浏览器painting。

function MyDiv() {
	return <div>这是一个自定义组件</div>; //_jsx方法，等价于return React.createElement('div', null, '这是一个自定义组件')
}

const parent_node = document.getElementById('root'); //获取根节点

const root = ReactDOM.createRoot(parent_node); //创建一个根节点容器

root.render(<MyDiv />); //将div添加到根节点并在真实DOM中painting。

//根节点实例方法接口如下R
// export interface Root {
//     render(children: React.ReactNode): void;
//     unmount(): void;
// }