角色管理
- 性能优化(前端面试)
需求:只要执行 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