React類實例prop阻止使用PureComponent

My React組件具有一個prop類，它是基於來自redux存儲庫的數據的類實例。React類實例prop阻止使用PureComponent

原因是使用類及其所有自定義方法（超過50個）處理此數據要方便得多。

我無法使用PureComponent，因爲React始終認爲此道具已更改。問題是，我的React組件大部分都連接到這個支持...

我知道解決方案像重新選擇，但這意味着有太多（我的類有自定義方法多）選擇器只用於操作的這些數據。

你會建議什麼？

我Redux的選擇看起來是這樣的：

getStation(state) { 
    // some logic to fetch the right station 
    return new WeatherStation(state.services.stationList[i]) 
}

其中氣象站是：

class WeatherStation { 
    constructor (data) { 
    this.station = data 
    } 

    getId() {...} 
    // many more methods 
}

和我的陣營Compoonent內：

class MyComponent extends React.Component { 
    ... 
    const mapStateToProps = (state, ownProps) => { 
    return { 
     station: getStation(state), 
    } 
    } 
}

來源

2017-09-27 Vincent Toupet

你可以發佈你的代碼的相關部分？ –

你有沒有試過ImmutableJS？ – hawk

還想看代碼。特別是你創建你的類實例的地方。 – jonahe

您是否嘗試過使用reselect沿着這些線路？

import { createSelector } from 'reselect'; 

getStationData(state) { 
    // some logic to fetch the right station 

    // no new instances here, just selecting the relevant data 
    return state.services.stationList[i]; 
} 


// create "memoized" selector. 
const getEnhancedStation = createSelector(
    getStationData, 
    stationData => new WeatherStation(stationData) 
)

如果我沒有理解reselect和createSelector正確，那麼這應該產生一個新的氣象站實例只有基礎數據，即。從getStationData返回的東西，已經改變。（而不是每次生成新實例任何東西在狀態變化。）

來源

2017-09-27 10:58:51 jonahe

非常感謝@jonahe，它像一個魅力。這將幫助我從組件的shouldComponentUpdate方法中刪除大量不必要的代碼 –

沒問題:)很高興聽到它的工作！ – jonahe

React類實例prop阻止使用PureComponent

回答

相關問題