antd的table滚动到顶部及

Posted 2021-04-24 webchen

antd的table滚动到顶部

antd的table是经过多层封装的，所以使用id属性是找不到table实例的， （1）先用ref找到table的组件实例， （2）使用ReactDOM.findDOMNode(ref)，找到table的DOM实例， （3）通过console.log找到.ant-table-body

（4）调用scrollTo(0,0)实现滚动到表格顶部的效果.

关键代码如下：

 
   
   
 

  
    
    
  
<Table  ref={c => this.usertable = c} >
  
    
    
  
</Table>
  
    
    
  


  
    
    
  


  
    
    
  
let tableDOM=ReactDOM.findDOMNode(this.usertable)
  
    
    
  
$(tableDOM).find('.ant-table-body')[0].scrollTo(0,0)
 
   
   
 

---

React之setState

基本知识

（1）React通过this.state来访问state

 
   
   
 

  
    
    
  
let {aa}=this.state
  
    
    
  
//xxxx
 
   
   
 

（2）通过this.setState()方法来更新state

 
   
   
 

  
    
    
  
this.setState({
  
    
    
  
 aa:newaa
  
    
    
  
})
 
   
   
 

（3）当this.setState()被调用后，会调用render重新渲染UI

一、setState的异步更新 当执行setState时，React 不会立即更新 state（频繁重复）,而是将需要更新的state放入 状态队列（enqueueUpdate） 中等待被更新，这样就实现了setState的异步更新。

二、setState循环调用的风险

如图，如果在 componentWillUpdate 或 shouldComponentUpdate 中 调用setState的时候，会导致循环调用，导致浏览器内存占满后崩溃。

着重解决一个问题:

 
   
   
 

  
    
    
  
  this.setState({ActiveNum:this.state.ActiveNum+1})
  
    
    
  
      console.log(this.state.ActiveNum,250)   ---------->0
  
    
    
  
      this.setState({ActiveNum:this.state.ActiveNum+1})
  
    
    
  
      console.log(this.state.ActiveNum,251)  ----------->0
  
    
    
  
      setTimeout(()=>{
  
    
    
  
        this.setState({ActiveNum:this.state.ActiveNum+1})
  
    
    
  
        console.log(this.state.ActiveNum,252)  ---------->2
  
    
    
  
        this.setState({ActiveNum:this.state.ActiveNum+1})
  
    
    
  
        console.log(this.state.ActiveNum,253)  ----------->3
  
    
    
  
      },0)
 
   
   
 

第一个和第二个的setState都处于批量更新模式（batchingStrategy）——isBatchingUpdates为true，所以会将组件保存到 dirtyComponents中，setState的结果没有立即生效，因为新的state没有应用到组件中，只是被 列到 dirtyComponents里了。

*第三个和第四个的setState由于setTimeout导致没有调用batchedUpdate，所以isBatchingUpdates为false，因此 React会遍历 dirtyComponetns，调用 updateComponent 并更新 pending state or props 所以当执行setTimeout的第一个setState时，这里的state已经为2，setState之后，打印的是2，setState未及时更新为3，当执行setTimeout的第二个setState时，这里的state已经为3，setState之后，打印的是3，setState未及时更新为4

事务：整个将React组件渲染到DOM中的过程就处于一个事务中。

参考：《深入Rect技术栈》 

---

 

（完）