React性能优化

154 阅读1分钟

渲染优化

方法传参

错误事例

<ComponentA onClick={() => this.handleClick()} >

每次都是创建的新的click事件的实例,若组件ComponentA中没有在ShouldComponentUpdate中不加以判断,都会导致ComponentA重新渲染,从而影响性能。 正确写法为

<ComponentA onClick={this.handleClick} >

Ant Design Table 性能优化

Ant Design Table内部未采用虚拟数据,导致刷新时是整个Table全局刷新,当表格未采用分页时,渲染就会造成阻塞,导致页面卡顿,解决方式有两种

(1)页面分页

(2)使用具有局部刷新的组件