在React-redux深入理解中，我們知道了 react-redux 是如何將 React 和 Redux 進行連接的目派，今天來說一下其中存在的性能問題以及改進的方式。
一胁赢、存在的性能問題
以 Redux 官網(wǎng)的 TodoList 為例：
class App extends Component {
static propTypes = {}; // 省略
render() {
const { visibleTodos, visibilityFilter, onAddClick, onTodoClick, onFilterChange } = this.props;
return (
<div>
<AddTodo onAddClick={(text) => onAddClick(text)} />
<TodoList
todos={visibleTodos}
onTodoClick={(index) => onTodoClick(index)} />
<Footer
filter={visibilityFilter}
onFilterChange={(nextFilter) => onFilterChange(nextFilter)} />
</div>
);
}
}
// 一個 state 計算函數(shù)
export const selectTodos = (todos, filter) => {
switch (filter) {
case 'SHOW_ALL':
return todos
case 'SHOW_COMPLETED':
return todos.filter(todo => todo.completed)
case 'SHOW_ACTIVE':
return todos.filter(todo => !todo.completed)
}
}
// mapStateToProps 就是一個 selector企蹭，每次組件更新的時候就會被調用
// 【缺點】每次組件更新的時候都會重新計算 visibleTodos，如果計算量比較大智末，會造成性能問題
const mapStateToProps = (state) => ({
visibleTodos: selectTodos(state.todos, state.visibilityFilter),
visibilityFilter: state.visibilityFilter
});
const mapDispatchToProps = (dispatch) => ({
onAddClick: (text) => dispatch(addTodo(text)),
onTodoClick: (index) => dispatch(toggleTodo(index)),
onFilterChange: (nextFilter) => dispatch(setVisibilityFilter(nextFilter))
});
export default connect(mapStateToProps, mapDispatchToProps)(App);
// selectors谅摄，舉例：mapStateToProps
// selector 的作用：將多個 state 進行計算后生成新的 state
(state, ...args) => deviration
【邏輯圖】：
Not use reselect
之前 connect 函數(shù)實現(xiàn)的時候，我們知道映射 props 的函數(shù)被 store.subscribe() 了系馆，因此每次組件更新的時候送漠，無論 state 是否改變，都會調用 mapStateToProps由蘑，而 mapStateToProps 在計算 state 的時候就會調用 state 計算函數(shù)闽寡，過程 如下：
store.subscribe()（注冊事件） —>狀態(tài)更新時調用 mapStateToProps（一個selector代兵，返回 state） —> 調用 state 計算函數(shù) selectTodos
那么，問題 來了爷狈，如果 slector 的計算量比較大植影，每次更新的重新計算就會造成性能問題。
而解決性能問題的 出發(fā)點 就是：避免不必要的計算涎永。
解決問題的方式：從 selector 著手思币，即 mapStateToProps，如果 selector 接受的狀態(tài)參數(shù)不變羡微，那么就不調用計算函數(shù)谷饿，直接利用之前的結果。
二拷淘、reselect 閃亮登場
reselect 其實就是 redux 的一個中間件各墨，它通過計算獲得新的 state，然后傳遞到 Redux Store启涯。其主要就是進行了中間的那一步計算贬堵，使得計算的狀態(tài)被緩存，從而根據(jù)傳入的 state 判斷是否需要調用計算函數(shù)结洼，而不用在組件每次更新的時候都進行調用黎做，從而更加高效。
1. reselect 理論理解
Use reselect
Reselect Selector 會通過傳入的不同 state 進行計算松忍，得到計算后的數(shù)據(jù)蒸殿。
reselect explained
selector 的作用：將多個 state 進行計算后生成新的 state
2. 采用 reselect，更新 App 組件：
// 不用 reselect 的缺點：每次組件更新的時候都會重新計算 visibleTodos
/*const mapStateToProps = (state) => ({
visibleTodos: selectTodos(state.todos, state.visibilityFilter),
visibilityFilter: state.visibilityFilter
});*/
// 采用 reselect 后鸣峭，相當于記憶緩存宏所，會緩存狀態(tài)
// 如果 state.todos 和 state.visibilityFilter 發(fā)生變化，它會重新計算 state
// 但是發(fā)生在其他部分的 state 變化摊溶，就不會重新計算
const getTodos = (state) => state.todos;
const getVisibilityFilter = (state) => state.visibilityFilter;
// getTodos 和 getVisibilityFilter 返回的參數(shù)將傳入 selectTodos
const getVisibleTodos = createSelector([getTodos, getVisibilityFilter], selectTodos);
const mapStateToProps = (state) => ({
visibleTodos: getVisibleTodos(state),
visibilityFilter: state.visibilityFilter
});
const mapDispatchToProps = (dispatch) => ({
onAddClick: (text) => dispatch(addTodo(text)),
onTodoClick: (index) => dispatch(toggleTodo(index)),
onFilterChange: (nextFilter) => dispatch(setVisibilityFilter(nextFilter))
});
/**
* connect用法：connect(selectors)(App); // selectors 即是一個對象爬骤，包含了狀態(tài)屬性和方法
* connect作用：即使 Dumb 組件從 store 中獲取數(shù)據(jù)
*/
// export default connect(mapStateToProps)(App);
export default connect(mapStateToProps, mapDispatchToProps)(App);
3. 再舉個 ?? ：
// Reselect selector
// Takes a list of posts and post Ids, and picks out
// the selected Posts
import { createSelector } from 'reselect';
import _ from 'loadash';
// Create select functions to pick off the pieces of state we care about
// for this calculation
const postsSelector = state => state.posts;
const selectedPostsSelector = state => state.selectedPostIds;
// 參數(shù)名字無所謂
const getPosts = (posts, selectedPostIds) => {
const selectPosts = _.filter(
posts,
post => _.contains(selectedPostIds, post.id)
);
return selectPosts;
}
/**
* 前面幾個參數(shù)：state selecting functions，當 state 改變時莫换，這些函數(shù)都會被執(zhí)行
* 前面這些參數(shù)產(chǎn)生的結果都會傳到最后一個函數(shù)
*/
const SelectedPostsSelector = createSelector([
postsSelector, // pick off a piece of state
selectedPostsSelector // pick off a piece of state
],
getPosts // last argument is the function that has our select logic
);
// App
const mapStateToPorps = state => ({
posts: SelectedPostsSelector(state)
});
export default connect(mapStateToPorps)(App);
