React效能優化 redux優化

簡介：redux的優化方案就是reselect,類似於vue的getter

我們從store中state獲取的資料，需要經過計算換成了元件可使用的資料，每次使用，每次都要重新計算，如果 state tree 非常大，或者計算量非常大，每次更新都重新計算可能會帶來效能問題，reselect就相當於乙個備忘錄，內部會做些快取的計算，且只有與該reselect相關的state變化時，reselect才會重新計算

可記憶的(memoized)

可組合的 selector 函式

引數：input-selectors 陣列

轉換函式

機制：state tree改變 -> input-selector變化 -> selector呼叫轉換函式

state tree不變 -> input-selector不變 -> 直接返回前一次計算的資料，不呼叫selector

import  from 'reselect'
const shopitemsselector = state， => state.shop.items
const taxpercentselector = state => state.shop.taxpercent
const subtotalselector = createselector(
shopitemsselector,
items => items.reduce((acc, item) => acc + item.value, 0)
)const taxselector = createselector(
subtotalselector,
taxpercentselector,
(subtotal, taxpercent) => subtotal * (taxpercent / 100)
)

const mapstatetoprops = (state) => 
}// 診療圈
// selectlist: 通過immutable轉為普通js物件
const mapstatetoprops = createselector(
selectlist,
selectshowmore,
selectloading,
($collectlist, showmore, loading) => (),
)

props 可以通過 mapstatetoprops 傳遞給 getvisibletodos:

const gettodos = (state, props) => state.todolists[props.listid].todos
const mapstatetoprops = (state, props) => 
}

每個元件的例項需要有拷貝 selector 的私有版本

1.我們建立乙個 makegetvisibletodos 的函式，在每個呼叫的時候返回乙個 getvisibletodos selector 的新拷貝

2.我們還需要一種每個容器訪問自己私有 selector 的方式

如果 connect 的 mapstatetoprops 返回的不是乙個物件而是乙個函式，他將被用做為每個容器的例項建立乙個單獨的 mapstatetoprops 函式

eg:

import react from 'react'
import footer from './footer'
import addtodo from '../containers/addtodo'
import visibletodolist from '../containers/visibletodolist'
)

用 createselector 建立的 selector 只有在引數集與之前的引數集相同時才會返回快取的值。

如果我們交替的渲染 visibletodolist listid="1" /> 和 visibletodolist listid="2" />，共享的 selector 將交替的接收 listid: 1 和 listid: 2。

這會導致每次呼叫時傳入的引數不同，因此 selector 將始終重新計算而不是返回快取的值。

const makegetvisibletodos = () => })}
const makemapstatetoprops = () => 
}  return mapstatetoprops
}

思考：現在的診療圈的是否沒有實現該種情況？並且沒有解決

React效能優化 redux優化

React 效能優化

react 效能優化

React效能優化

React效能優化 redux優化

React 效能優化

react 效能優化

React效能優化

相關推薦