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