React重新渲染UI时遇到的坑

最新推荐文章于 2024-07-23 09:42:35 发布

No.Cr

最新推荐文章于 2024-07-23 09:42:35 发布

阅读量2.4k

点赞数 1

本文链接：https://blog.csdn.net/qq_37488630/article/details/92069085

版权

React应用在更新UI时，通过虚拟DOM对比来提升性能。然而，直接操作实体DOM可能导致React无法识别变化。例如，一个拖拽表格行的例子中，虽然数据正确更新，但因React未检测到行顺序变化，导致渲染结果错误。问题在于React仅根据虚拟DOM的变更进行渲染，忽视了实体DOM的实际变动。

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

React在render重新渲染UI时会与原先渲染时的虚拟DOM比较差异，然后只重新渲染差异部分以提高性能 *注意是虚拟DOM，这会导致通过js对实体DOM的操作，React是无法识别的。

举个例子：

import React,{ Component } from "react";
import './index.css';
class FormTable extends Component{
    constructor(props){
        super();
        this.state={
            table:[
            {
                col1:'1',
                col2:'2',
                col3:'3',
                col4:'4',
            },
            {
                col1:'5',
                col2:'6',
                col3:'7',
                col4:'8',
            },
            {
                col1:'9',
                col2:'10',
                col3:'11',
                col4:'12',
            },
            {
                col1:'13',
                col2:'14',
                col3:'15',