react虚拟DOM

wlt_5079

已于 2022-06-22 22:36:57 修改

阅读量123

点赞数

文章标签： react.js javascript 前端

于 2022-06-21 22:47:36 首次发布

本文链接：https://blog.csdn.net/wlt_5079/article/details/125400272

版权

本文详细介绍了React虚拟DOM的实现流程，包括组件初始化时将DOM转化为JS对象，setState后的更新过程，以及diff算法的工作原理。通过虚拟DOM，React实现了DOM的局部更新，提高了性能。同时，文章还探讨了React虚拟DOM的优化策略。

摘要由CSDN通过智能技术生成

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: [