react_app 项目开发 (8)_角色管理_用户管理----权限管理 ---- shouldComponentUpdate

角色管理

 

 

 

• 性能优化（前端面试）

需求：只要执行 setState(), 就会调用 render  从新渲染。因为有时调用了 setState，可是并无发生状态的改变，以至于没必要要的刷新

• 解决： 重写 shouldComponentUpdate(newProps, newStates)   使之返回 false 不更新

默认返回 true，始终在一进行 setStete 时就进行渲染，即便数据无变化

将新值 与 旧值 进行比较，改变了则进行渲染

• 缺点： 全部相关的 改变，都要进行比较

优化： import {PureComponent} from "react"    // 原理也是重写 shouldComponent 将组件状态/属性数据进行改变的判断

将类 继承于 PureComponent 

可是这样也带来了新问题： 在对 state 中数组进行 push 修改时

缘由： state 中存的是对 对象的引用变量，因为未发生改变，因此不会刷新页面

解决： roles = [...this.state.roles, role]        // 从新生成新的对象，roles 指向新的对象

总结：

1. 使用 PureComponent 代替 Component

2. 从 state 中取出数组或者对象，尽可能

const todos = [...this.state.todos];       // ES6

或者 const todos = this.state.todos.splice();        // ES5

5

5

5

5

5

5

5

5

4

5

5

5

5

5

55

5

5

5

5

5

5

5

5

5

5