react虚拟DOM

react虚拟DOM

1. react实现流程

import React, { Component } from 'react'

export default class VerDOM extends Component {
  state = { name: "张三" }
  constructor(props){
    super(props);
  }
  setName = ()=>{
    this.setState({
      name: "李四"
    })
  render() {
    return (
      <div className='DOM'>
        <h1 className='title'>这是虚拟DOM页</h1>
        <button onClick={this.setName}>{this.state.name}</button>
      </div>
    )
  }
}

2. react虚拟DOM实现流程

（1）在组件初始化时, 把DOM树标签结构转化为js对象结构

render() {
    // 模拟实现react底层虚拟DOM把html标签树结构转化为js对象结构
    return React.createElement(
      "div",
      {
        key: "1",
        className: "DOM",
        children: [