Javascript 调用componentDidUpdate（）时，页面会短暂冻结

当我的REACT组件使用

componentDidUpdate（）

方法时，我当前遇到了一个问题。在此方法中，代码更新并重新绘制DataTables.net表。冻结时间约为7-10秒，因此我知道它不是在我的API调用期间发生的，因为这大约需要25-30秒

作为参考，在表即将更新时，我在

componentdiddupdate（）

方法中记录日志。一旦它登录到控制台，页面就会冻结

我尝试了许多不同的解决方案，这些解决方案使我想到了

componentdiddupdate（）

方法。我甚至清除了这个方法中的所有代码，而不是清除和重新绘制表

该计划的目标是持续轮询和更新表格

import React from 'react';
import axios from 'axios';
const $ = require('jquery');
$.DataTable = require('datatables.net');



function UpdateRibs() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(axios.post('/index', {'getRibs': 'getRibs'}));
    }, 35000);
  });
}


export class RibTable extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      ribs: ''
    };
    this.ribTable=React.createRef();
  }

  componentDidMount() {
   this.getRibs()
  }

  async getRibs(){
    let response = await UpdateRibs()
    this.setState({ribs: response.data.data})
  }

  componentWillUnmount() {
    clearInterval(this.poll);
    $(this.ribTable.current).DataTable().destroy();
  }
  
  componentDidUpdate(prevState) {
    console.log('Updated')
    if (prevState.ribs !== this.state.ribs && this.ribTable !== undefined) {

        if ( $(this.ribTable.current).DataTable().data().any() ) {
          $(this.ribTable.current).DataTable().clear();
        }
        
        for (let [key, value] of Object.entries(this.state.ribs)){
          for (let item of value){
            $(this.ribTable.current).DataTable().row.add([
              item.name,
              item.address_family,
              item.dest_prefix,
              item.metric,
              item.route_preference,
              item.next_hop,
              item.outgoing_interface,
              item.active,
              item.source_protocol
            ]).draw(false).nodes()
            .to$().addClass('text-center')
          }
        }
        $(this.ribTable.current).fadeIn("slow");
        this.getRibs()
      }
  };

  render (){

    if (this.state.ribs == ''){

      return (
        
        <div class="card">
        <div class="card-body background blinking">
        <h3 class="card-header h3 background">Loading RIB Table<span class="h3 blinking">......</span></h3>
          <div class="loader"></div>
        </div>
    </div>

      );
    }
    else {
      return (
      <div class="row">
        <div class="col-xl-12">
            <div class="card">
                <div class="card-header border-0">
                    <div class="row align-items-center">
                        <div class="col ">
                            <h4 class="mb-0">Rib Entries<span class="status" ref={this.status}>Idle
                              </span>
                              </h4>
                        </div>
                    </div>
                </div>
                <div class="table-responsive">
                    <span class="counter pull-right"></span>
                    <br/>
                    <table class="display compact fadeTables" ref={this.ribTable}>
                        <thead class="thead-light" id='thead'>
                            <tr id='headr'>
                              <th class="text-center" scope="col">Name</th>
                              <th class="text-center" scope="col">Address-Family</th>
                              <th class="text-center" scope="col">Destination</th>
                              <th class="text-center" scope="col">Prefrence</th>
                              <th class="text-center" scope="col">Metric</th>
                              <th class="text-center" scope="col">Nex-Hop</th>
                              <th class="text-center" scope="col">Out Interface</th>
                              <th class="text-center" scope="col">Is Active</th>
                              <th class="text-center" scope="col">Source Protocol</th>
                          </tr>
                        </thead>
                    </table>
                  </div>
              </div>
          </div>
      </div>

      );
    };
  };
};

updateTable(){

    let entries = []
  
    for (let [key, value] of Object.entries(this.ribs)){
      for (let item of value){
        entries.push([ item.name,
         item.address_family,
         item.dest_prefix,
         item.metric,
         item.route_preference,
         item.next_hop,
         item.outgoing_interface,
         item.active,
         item.source_protocol])
      }
    }

    if ( $(this.ribTable.current).DataTable().data().any() ) {
      $(this.ribTable.current).DataTable().destroy();
    }
    $(this.ribTable.current).DataTable({data: entries})
    
  }

  buildTable(){

    for (let [key, value] of Object.entries(this.ribs)){
      for (let item of value){
        $(this.ribTable.current).DataTable().row.add([
          item.name,
          item.address_family,
          item.dest_prefix,
          item.metric,
          item.route_preference,
          item.next_hop,
          item.outgoing_interface,
          item.active,
          item.source_protocol
        ]).draw().nodes()
        .to$().addClass('text-center')
      }
    }
  }

从“React”导入React；
从“axios”导入axios；
const$=require（'jquery'）；
$.DataTable=require（'datatables.net'）；
函数UpdateRibs（）{
返回新承诺（解决=>{
设置超时（（）=>{
解析（axios.post（'/index'，{'getRibs'：'getRibs'}））；
}, 35000);
});
}
导出类RIBCTABLE扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
肋骨：“”
};
this.ribTable=React.createRef（）；
}
componentDidMount（）{
这个
}
异步getRibs（）{
let response=wait UpdateRibs（）
this.setState（{ribs:response.data.data}）
}
组件将卸载（）{
clearInterval（this.poll）；
$（this.ribTable.current）.DataTable（）.destroy（）；
}
componentDidUpdate（prevState）{
console.log（'Updated'）
if（prevState.ribs！==this.state.ribs&&this.ribTable！==未定义）{
if（$（this.ribTable.current）.DataTable（）.data（）.any（））{
$（this.ribTable.current）.DataTable（）.clear（）；
}
for（让Object.entries的[key，value]（this.state.ribs））{
对于（有价值的项目）{
$（this.ribTable.current）.DataTable（）.row.add([
item.name，
item.address_系列，
item.dest_前缀，
项目1.公制，
item.route_首选项，
下一步，
item.u接口，
项目.活动，
item.source\u协议
]).draw（false）.nodes（）
.to$（）.addClass（'text-center'））
}
}
$（this.ribTable.current）.fadeIn（“慢”）；
这个
}
};
渲染（）{
如果（this.state.ribs==''）{
返回(
加载肋台。。。。。。
);
}
否则{
返回(
肋骨中心线


名称
地址家庭
目的地
优先权
米制的
下一跳
外部接口
是活跃的
源协议
);
};
};
};

我更新了代码并从此.state（{}）中删除了肋骨。因此，现在页面只呈现一次，表将在不进行页面呈现的情况下更新。我仍然在经历同样的问题，我相信这与桌上抽签有关。在我在绘图前后记录的updateTable（）方法中，这就是7-10出现的地方

function UpdateRibs() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(axios.post('/index', {'getRibs': 'getRibs'}));
    }, 5000);
  });
}

export class RibTable extends React.Component {

  constructor(props) {
    super(props);
    this.state = {renderPage: false};
    this.ribTable=React.createRef();
    this.ribs = ''
  }

  componentDidMount() {
    this.getRibs()
  }

  async getRibs(){
    const res = await UpdateRibs()
    this.ribs = res.data.data
    console.log(this.res)

    if (this.state.renderPage === false){
      this.setState({renderPage: true})
    }
    
    this.updateTable()
    this.getRibs()
  }

  componentWillUnmount() {
    clearInterval(this.poll);
    $(this.ribTable.current).DataTable().destroy();
  }
  
  componentDidUpdate(prevState){
    if (prevState.renderPage != this.state.renderPage){
      $(this.ribTable.current).fadeIn("slow");
      console.log('Rendering')
    }
  }

  async updateTable(){

    console.log('Updating')
    
    if ( $(this.ribTable.current).DataTable().data().any() ) {
     $(this.ribTable.current).DataTable().destroy();
    }
    
    for (let [key, value] of Object.entries(this.ribs)){
      for (let item of value){
        $(this.ribTable.current).DataTable().row.add([
          item.name,
          item.address_family,
          item.dest_prefix,
          item.metric,
          item.route_preference,
          item.next_hop,
          item.outgoing_interface,
          item.active,
          item.source_protocol
        ]).draw().nodes()
        .to$().addClass('text-center')
      }
    }
    console.log('Updated')

  }

  render (){

    if (this.state.renderPage === false){

      return (
        
        <div class="card">
        <div class="card-body background blinking">
        <h3 class="card-header h3 background">Loading RIB Table<span class="h3 blinking">......</span></h3>
          <div class="loader"></div>
        </div>
    </div>

      );
    }
    else {
      return (
      <div class="row">
        <div class="col-xl-12">
            <div class="card">
                <div class="card-header border-0">
                    <div class="row align-items-center">
                        <div class="col ">
                            <h4 class="mb-0">Rib Entries<span class="status" ref={this.status}>Idle
                              </span>
                              </h4>
                        </div>
                    </div>
                </div>
                <div class="table-responsive">
                    <span class="counter pull-right"></span>
                    <br/>
                    <table class="display compact fadeTables" ref={this.ribTable}>
                        <thead class="thead-light" id='thead'>
                            <tr id='headr'>
                              <th class="text-center" scope="col">Name</th>
                              <th class="text-center" scope="col">Address-Family</th>
                              <th class="text-center" scope="col">Destination</th>
                              <th class="text-center" scope="col">Prefrence</th>
                              <th class="text-center" scope="col">Metric</th>
                              <th class="text-center" scope="col">Nex-Hop</th>
                              <th class="text-center" scope="col">Out Interface</th>
                              <th class="text-center" scope="col">Is Active</th>
                              <th class="text-center" scope="col">Source Protocol</th>
                          </tr>
                        </thead>
                    </table>
                  </div>
              </div>
          </div>
      </div>

      );
    };
  };
};

函数UpdateRibs（）{
返回新承诺（解决=>{
设置超时（（）=>{
解析（axios.post（'/index'，{'getRibs'：'getRibs'}））；
}, 5000);
});
}
导出类RIBCTABLE扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={renderPage:false}；
this.ribTable=React.createRef（）；
这个。肋骨=“”
}
componentDidMount（）{
这个
}
异步getRibs（）{
const res=await UpdateRibs（）
this.ribs=res.data.data
console.log（this.res）
if（this.state.renderPage==false）{
this.setState（{renderPage:true}）
}
this.updateTable（）
这个
}
组件将卸载（）{
clearInterval（this.poll）；
$（this.ribTable.current）.DataTable（）.destroy（）；
}
componentDidUpdate（prevState）{
if（prevState.renderPage！=此.state.renderPage）{
$（this.ribTable.current）.fadeIn（“慢”）；
console.log（'Rendering'）
}
}
异步更新表（）{
console.log（'更新'）
if（$（this.ribTable.current）.DataTable（）.data（）.any（））{
$（this.ribTable.current）.DataTable（）.destroy（）；
}
for（让Object.entries的[key，value]（this.ribs））{
对于（有价值的项目）{
$（this.ribTable.current）.DataTable（）.row.add([
item.name，
item.address_系列，
item.dest_前缀，
项目1.公制，
item.route_首选项，
下一步，
item.u接口，
项目.活动，
item.source\u协议
]).draw（）.nodes（）
.to$（）.addClass（'text-center'））
}
}
console.log（'Updated'）
}
渲染（）{
if（this.state.renderPage==false）{
返回(
加载肋台。。。。。。
);
}
否则{
返回(
肋骨中心线
function UpdateRibs() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(axios.post('/index', {'getRibs': 'getRibs'}));
    }, 5000);
  });
}


export class RibTable extends React.Component {

  constructor(props) {
    super(props);
    this.state = {renderPage: false};
    this.ribTable=React.createRef();
    this.ribs = ''
  }

  componentDidMount() {
    this.getRibs()
  }

  async getRibs(){
    const res = await UpdateRibs()
    this.ribs = res.data.data

    if (this.state.renderPage === false){
      this.setState({renderPage: true})
    }
  }

  async getUpdatedRibs(){
    const res = await UpdateRibs()
    this.ribs = res.data.data
    this.updateTable()
    this.getUpdatedRibs()
  }


  componentWillUnmount() {
    clearInterval(this.poll);
    $(this.ribTable.current).DataTable().destroy();
  }
  
  componentDidUpdate(prevState){
    if (prevState.renderPage != this.state.renderPage){
      console.log('Rendering')
      this.buildTable()
      $(this.ribTable.current).fadeIn("slow");
      this.getUpdatedRibs()
    }
  }

  updateTable(){

    let entries = []
  
    for (let [key, value] of Object.entries(this.ribs)){
      for (let item of value){
        entries.push([ item.name,
         item.address_family,
         item.dest_prefix,
         item.metric,
         item.route_preference,
         item.next_hop,
         item.outgoing_interface,
         item.active,
         item.source_protocol])
      }
    }

    if ( $(this.ribTable.current).DataTable().data().any() ) {
      $(this.ribTable.current).DataTable().destroy();
    }
    $(this.ribTable.current).DataTable({data: entries})
    
  }

  buildTable(){

    for (let [key, value] of Object.entries(this.ribs)){
      for (let item of value){
        $(this.ribTable.current).DataTable().row.add([
          item.name,
          item.address_family,
          item.dest_prefix,
          item.metric,
          item.route_preference,
          item.next_hop,
          item.outgoing_interface,
          item.active,
          item.source_protocol
        ]).draw().nodes()
        .to$().addClass('text-center')
      }
    }
  }

  render (){

    if (this.state.renderPage === false && this.ribs == ''){

      return (
        
        <div class="card">
        <div class="card-body background blinking">
        <h3 class="card-header h3 background">Loading RIB Table<span class="h3 blinking">......</span></h3>
          <div class="loader"></div>
        </div>
    </div>

      );
    }
    else {
      return (
      <div class="row">
        <div class="col-xl-12">
            <div class="card">
                <div class="card-header border-0">
                    <div class="row align-items-center">
                        <div class="col ">
                            <h4 class="mb-0">Rib Entries<span class="status" ref={this.status}>Idle
                              </span>
                              </h4>
                        </div>
                    </div>
                </div>
                <div class="table-responsive">
                    <span class="counter pull-right"></span>
                    <br/>
                    <table class="display compact fadeTables" ref={this.ribTable}>
                        <thead class="thead-light" id='thead'>
                            <tr id='headr'>
                              <th class="text-center" scope="col">Name</th>
                              <th class="text-center" scope="col">Address-Family</th>
                              <th class="text-center" scope="col">Destination</th>
                              <th class="text-center" scope="col">Prefrence</th>
                              <th class="text-center" scope="col">Metric</th>
                              <th class="text-center" scope="col">Nex-Hop</th>
                              <th class="text-center" scope="col">Out Interface</th>
                              <th class="text-center" scope="col">Is Active</th>
                              <th class="text-center" scope="col">Source Protocol</th>
                          </tr>
                        </thead>
                    </table>
                  </div>
              </div>
          </div>
      </div>

      );
    };
  };
};