Redux性能優化

plokmju88 發布于2019-08-22 11:01 / 1455人閱讀

摘要：簡單的說就是能夠管理的狀態，狀態是由數據維護的，也就是說是管理數據的。在內，每執行一次，所有的都會執行。所以這里就有個問題，如果比較多的時候，性能是不是就會出問題。

Redux is a predictable state container for JavaScript apps.

簡單的說就是Redux能夠管理js app的狀態，狀態是由數據維護的，也就是說Redux是管理數據的。那么Redux是怎么管理數據的呢？

store

一個Redux app中只有一個store，所有的數據都在這個store中，而通過createStore(reducer, [initState])，initState是可選參數，也就是說決定store的是reducer，reducer決定store中存放什么樣的數據、處理什么樣的數據、處理數據的方式。

store在創建的時候內部會執行dispatch({ type: ActionTypes.INIT })，用來初始化整個store的數據結構，同時獲取reducer中的默認數據。之所以能拿到全部的數據結構，是因為在dispatch({ type: ActionTypes.INIT })的時候，所有的reducer都會執行，并根據reducer的combine結構生成數據。在Redux內，每執行一次dispatch，所有的reducer都會執行。

reducer

所以這里就有個問題，如果reducer比較多的時候，性能是不是就會出問題。大家可能會想到減少reducer，這也是一個辦法，但是如果刻意減少reducer的話，可能會導致某個reducer內過于復雜，后期難以維護。

const dispatcher = (state={}, action) {
  switch (action.type) {
    case "TYPE1": 
    case "TYPE2":
      return reducerFirst(state, action)
    case "TYPE3":
      return reducerSecond(state, action)
    default:
      return state
  }
}

通過這樣簡單的過濾就可以實現只讓對action感興趣的reducer執行，簡單，方便，快捷。

action

action是個object，它必須有個type屬性，一般是個常量，來標示action類型，方便reducer處理。除去type剩下的一般就是要處理的數據，如果數據比較簡單可以直接使用Object.assign({}, state, action.data)來處理，這種方法僅適合簡單數據。

如果是復雜數據，有較深的層級，就要使用深度拷貝，這時候你可以使用lodash的cloneDeep進行深度拷貝。

var objects = [{ "a": 1 }, { "b": 2 }];
var deep = _.cloneDeep(objects);
console.log(deep[0] === objects[0]);
// ? false

immutable

但是復雜數據的深度拷貝是很花性能的，這個時候就可以使用immutable.js來解決這個問題。immutable不可改變的意思，在Object-C中是原生提供這種數據類型的。對immutable.js生成的數據進行操作之后總是返回一個新的數據，原有的數據不會改變。

var Immutable = require("immutable");
var map1 = Immutable.Map({a:1, b:2, c:3});
var map2 = map1.set("b", 50);
map1.get("b"); // 2
map2.get("b"); // 50

immutable.js通過結構共享來解決的數據拷貝時的性能問題，數據被set的時候，immutable.js會只clone它的父級別以上的部分，其他保持不變，這樣大家可以共享同樣的部分，可以大大提高性能。如圖

subscribe

每次執行dispatch，通過subscribe注冊的listener都會被執行，如果listener較多，或者listener內部處理比較復雜也會對性能產生影響，而且在listener內部很難區分哪個數據被改變了，如果在listener內部繼續dispatch，而沒有處理好執行dispatch條件的話，很容易造成dispatch->listener->dispatch死循環。所以建議通過middleware的方式來處理，而且在middleware內部可以知道action是什么，就可以只處理關心的action。

總結

預分配reducer、精簡reducer

精簡action數據或使用immutable.js

使用middleware處理特殊需求(reducer中不方便處理的需求)

參考

Redux

immutable.js

cloneDeep

云服務器 GPU云服務器性能優化優化系統性能網站性能優化頁面性能優化

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91627.html

React-Redux性能優化

摘要：但是和一起使用還需要一個工具，這一篇就說一下在使用上的一些性能優化建議。如果的改變會引起值變化，那么會調用轉換函數，傳入作為參數，并返回結果。如果的值和前一次的一樣，它將會直接返回前一次計算的數據，而不會再調用一次轉換函數。前面寫了兩篇文章《React組件性能優化》《Redux性能優化》，分別針對React和Redux在使用上的性能優化給了一些建議。但是React和Redux一起使用...

JouyPub 2019-08-21 10:57 評論0 收藏0
高級前端面試題大匯總（只有試題，沒有答案）

摘要：面試題來源于網絡，看一下高級前端的面試題，可以知道自己和高級前端的差距。面試題來源于網絡，看一下高級前端的面試題，可以知道自己和高級前端的差距。有些面試題會重復。使用過的koa2中間件 koa-body原理介紹自己寫過的中間件有沒有涉及到Cluster 介紹pm2 master掛了的話pm2怎么處理如何和MySQL進行通信 React聲明周期及自己的理解如何...

kviccn 2019-08-23 13:41 評論0 收藏0
2018大廠高級前端面試題匯總

摘要：面試的公司分別是阿里網易滴滴今日頭條有贊挖財滬江餓了么攜程喜馬拉雅兌吧微醫寺庫寶寶樹海康威視蘑菇街酷家樂百分點和海風教育。（關注福利，關注本公眾號回復[資料]領取優質前端視頻，包括Vue、React、Node源碼和實戰、面試指導）本人于7-8月開始準備面試，過五關斬六將，最終抱得網易歸，深深感受到高級前端面試的套路。以下是自己整理的面試題匯總，不敢藏私，統統貢獻出來。面試的公司分...

zzir 2019-08-23 12:38 評論0 收藏0