React 性能調優總結

React 性能調優總結

首先要說一個庫： why-did-you-update, 地址：why-did-you-update， 利用這個庫能夠在頁面上快速看到多餘渲染的問題：

由於多數狀況下咱們在React組件當中是不會去寫shouldComponentUpdate這個hook來避免多餘渲染的，因此就形成了少許的性能浪費。雖然優化是個漫長的道路，過早優化是邪惡的，但作仍是要去作的。

下面講一下基本的一些手段

shouldComponentUpdate

在React當中，每一次的setState操做，都會讓Virtual DOM去作diff操做，雖然虛擬DOM的計算很快，可是隨着組件愈來愈多，結構愈來愈複雜，當你改變某個簡單的state時，就會形成連帶不少Component的從新render，因此咱們能夠在組件內部去添加shouldComponentUpdate鉤子來告訴React是否要更新組件

PureComponent

固然咱們在實際開發過程中，因爲數據的複雜程度來講，基本是不會去寫shouldComponentUpdatehook，這時就能夠去使用PureComponent類來聲明組件。

PureComponent的前身是PureRenderMixin,和Component的區別就在於組件在render以前會自動執行一次shallowEqual（淺比較）,就至關於組件的第一層props和state的數據若是沒有發生改變，render就不會去執行，從而減小了沒必要要的渲染。

根據React源碼，若是組件是純組件(Pure Component)，那麼一下比較是很容易理解的：

if (this._compositeType === CompositeTypes.PureClass) { shouldUpdate = !shallowEqual(prevProps, nextProps) || ! shallowEqual(inst.state, nextState); } 

爲何說是淺比較呢？這個很好理解，js的引用數據類型就很好的說明了這一點：

{} === {} //false [] === [] //false 

固然，你也能夠在shouldComponentUpdate中本身來寫深比較，在數據結構相對簡單的狀況下：

shouldComponentUpdate(nextProps, nextState) {
  return nextProps.user.id === props.user.id; } 

若是是在PureComponent當中寫了這個鉤子，那麼它就會被優先執行。

固然，在數據結構和嵌套比較深的狀況下，這個方案也就不太管用了，因此，咱們在前期定義數據結構時也是一個很重要的環節，能夠去避免沒必要要的渲染。

Immutable or Immer

Facebook在2014年就推出了這個庫： Immutable.js，用來使數據持久化。在數據建立後，就不得去改變，任何的增刪改操做都是true一個新的Immutable對象：

import { Map } from "immutable"; const map1 = Map({ a: { aa: 1 }, b: 2, c: 3 }); const map2 = map1.set('b', 50); map1 !== map2; // true map1.get('b'); // 2 map2.get('b'); // 50 map1.get('a') === map2.get('a'); // true 

ImmutableJS 最大的兩個特性就是： immutable data structures（持久性數據結構）與 structural sharing（結構共享），持久性數據結構保證數據一旦建立就不能修改，使用舊數據建立新數據時，舊數據也不會改變，不會像原生 js 那樣新數據的操做會影響舊數據。而結構共享是指沒有改變的數據共用一個引用，這樣既減小了深拷貝的性能消耗，也減小了內存。好比下圖：

ImmutableJS的API過於複雜，並且我也沒有用redux，而是採用了Mutable的Mobx,看見Mobx的做者寫了一個庫Immer，相對於ImmutableJS 比較簡單：

import produce from "immer" /** * Classic React.setState with a deep merge */ onBirthDayClick1 = () => { this.setState(prevState => ({ user: { ...prevState.user, age: prevState.user.age + 1 } })) } /** * ...But, since setState accepts functions, * we can just create a curried producer and further simplify! */ onBirthDayClick2 = () => { this.setState( produce(draft => { draft.user.age += 1 }) ) } 

代碼上的優化

少用bind

每次bind都會返回一個新函數，重複建立靜態函數會浪費性能。最好直接使用箭頭函數綁定或者利用閉包直接把處理函數傳入子組件

setState優化

在咱們去setState時，最好用新值去覆蓋舊值，而不是修改原值。 對於數組，咱們採用es6的spread語法：

this.setState(prevState => ({ words: [...prevState.words, 'marklar'], })); 

對於對象，咱們採用Object.assign或spread:

this.setState({ a: Object.assign({}, this.state.a, {b: '2222'}) }) //或者 this.setState({ a: {...this.state.a, {b: '222'}} }) 

不要在PureComponent組件的props使用直接賦值的方式

style={ { width: '100px' } } 這樣的作法傳入組件會形成重複渲染

這樣的方式會使shallowEqual必定返回false

正確的方式：

const YourStyle = { width: '100px' } return ( <YourComponent style={YourStyle}></YourComponent> ) 

或者咱們直接就用上面說到的Immutable.js 或者 Immer.js 來處理