在React-redux深入理解中，我們知道了 react-redux 是如何將 React 和 Redux 進(jìn)行連接的，今天來(lái)說(shuō)一下其中存在的性能問(wèn)題以及改進(jìn)的方式。
一、存在的性能問(wèn)題
以 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>
);
}
}
// 一個(gè) state 計(jì)算函數(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 就是一個(gè) selector，每次組件更新的時(shí)候就會(huì)被調(diào)用
// 【缺點(diǎn)】每次組件更新的時(shí)候都會(huì)重新計(jì)算 visibleTodos，如果計(jì)算量比較大，會(huì)造成性能問(wèn)題
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 的作用：將多個(gè) state 進(jìn)行計(jì)算后生成新的 state
(state, ...args) => deviration
【邏輯圖】：
之前 connect 函數(shù)實(shí)現(xiàn)的時(shí)候，我們知道映射 props 的函數(shù)被 store.subscribe() 了，因此每次組件更新的時(shí)候，無(wú)論 state 是否改變，都會(huì)調(diào)用 mapStateToProps，而 mapStateToProps 在計(jì)算 state 的時(shí)候就會(huì)調(diào)用 state 計(jì)算函數(shù)，過(guò)程 如下：
store.subscribe()（注冊(cè)事件） —>狀態(tài)更新時(shí)調(diào)用 mapStateToProps（一個(gè)selector，返回 state） —> 調(diào)用 state 計(jì)算函數(shù) selectTodos
那么，問(wèn)題 來(lái)了，如果 slector 的計(jì)算量比較大，每次更新的重新計(jì)算就會(huì)造成性能問(wèn)題。
而解決性能問(wèn)題的 出發(fā)點(diǎn) 就是：避免不必要的計(jì)算。
解決問(wèn)題的方式：從 selector 著手，即 mapStateToProps，如果 selector 接受的狀態(tài)參數(shù)不變，那么就不調(diào)用計(jì)算函數(shù)，直接利用之前的結(jié)果。
二、reselect 閃亮登場(chǎng)
reselect 其實(shí)就是 redux 的一個(gè)中間件，它通過(guò)計(jì)算獲得新的 state，然后傳遞到 Redux Store。其主要就是進(jìn)行了中間的那一步計(jì)算，使得計(jì)算的狀態(tài)被緩存，從而根據(jù)傳入的 state 判斷是否需要調(diào)用計(jì)算函數(shù)，而不用在組件每次更新的時(shí)候都進(jìn)行調(diào)用，從而更加高效。
1. reselect 理論理解
Reselect Selector 會(huì)通過(guò)傳入的不同 state 進(jìn)行計(jì)算，得到計(jì)算后的數(shù)據(jù)。
selector 的作用：將多個(gè) state 進(jìn)行計(jì)算后生成新的 state
2. 采用 reselect，更新 App 組件：
// 不用 reselect 的缺點(diǎn)：每次組件更新的時(shí)候都會(huì)重新計(jì)算 visibleTodos
/*const mapStateToProps = (state) => ({
visibleTodos: selectTodos(state.todos, state.visibilityFilter),
visibilityFilter: state.visibilityFilter
});*/
// 采用 reselect 后，相當(dāng)于記憶緩存，會(huì)緩存狀態(tài)
// 如果 state.todos 和 state.visibilityFilter 發(fā)生變化，它會(huì)重新計(jì)算 state
// 但是發(fā)生在其他部分的 state 變化，就不會(huì)重新計(jì)算
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 即是一個(gè)對(duì)象，包含了狀態(tài)屬性和方法
* connect作用：即使 Dumb 組件從 store 中獲取數(shù)據(jù)
*/
// export default connect(mapStateToProps)(App);
export default connect(mapStateToProps, mapDispatchToProps)(App);
3. 再舉個(gè) ?? ：
// 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ù)名字無(wú)所謂
const getPosts = (posts, selectedPostIds) => {
const selectPosts = _.filter(
posts,
post => _.contains(selectedPostIds, post.id)
);
return selectPosts;
}
/**
* 前面幾個(gè)參數(shù)：state selecting functions，當(dāng) state 改變時(shí)，這些函數(shù)都會(huì)被執(zhí)行
* 前面這些參數(shù)產(chǎn)生的結(jié)果都會(huì)傳到最后一個(gè)函數(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);
