如何在智能容器中定義函數時保持組件純粹？

我在我的應用程序中使用react，redux和immutablejs。該商店是不可變的，並被映射到道具。將調度映射到道具時，我提供了輔助函數。該輔助函數與這段代碼在終極版TodoList的例子相媲美：如何在智能容器中定義函數時保持組件純粹？

const mapDispatchToProps = (dispatch) => { 
    return { 
    onTodoClick: (id) => { 
     dispatch(toggleTodo(id)) 
    } 
    } 
}

我現在的問題是，我的純組分渲染過於頻繁：上述連接創建一個onTodoClick功能連接每一個。當PureRenderMixin shallowCompares currentProps到newProps時，它將組件標記爲shouldUpdate，因爲指針已更改。

如何在保持組件的渲染計數低的同時在容器中定義幫助函數？

我已經看過重新選擇，但計劃只用它來計算mapStateToProps中的派生狀態。爲每一個連接創建一個選擇器會更好嗎，所以你的函數也被記憶了嗎？

來源

2016-08-30 Jasper

看一看['shouldComponentUpdate'（https://facebook.github.io/react/docs/component-specs.html#updating-shouldcomponentupdate）。您可能可以調整組件以不經常渲染。 –

@MarioTacke正是'pureRenderMixin'已經做到的。 – ajmajmajma

這可能是一個黑客，但你可以很memoize的基礎上，dispatch參數函數（假設終極版總是發送的同店同樣的功能）：

let lastDispatch; 
let dispatchProps; 
const mapDispatchToProps = (dispatch) => { 
    if (!dispatchProps || dispatch !== lastDispatch) { 
    dispatchProps = { 
     onTodoClick: (id) => { 
     dispatch(toggleTodo(id)) 
     } 
    } 
    lastDispatch = dispatch; 
    } 
    return dispatchProps; 
}

或使用lodash memoize的：

const mapDispatchToProps = _.memoize((dispatch) => { 
    return { 
    onTodoClick: (id) => { 
     dispatch(toggleTodo(id)) 
    } 
    } 
})

UPDATE：這不是黑客攻擊，它似乎與他們的官方文檔對齊：

注意：在需要更多控制渲染性能的高級方案中，mapDispatchToProps（）也可以返回一個函數。在這種情況下，該函數將用作特定組件實例的mapDispatchToProps（）。這使您可以執行每個實例的記憶。您可以參考＃279以及它添加的測試以獲取更多詳細信息。大多數應用程序不需要這樣

參見：https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options

來源

2016-09-16 07:28:55 Benja

如何在智能容器中定義函數時保持組件純粹？

回答

相關問題