在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，每次組件更新的時候就會被調(diào)用
// 【缺點】每次組件更新的時候都會重新計算 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 是否改變，都會調(diào)用 mapStateToProps，而 mapStateToProps 在計算 state 的時候就會調(diào)用 state 計算函數(shù)，過程 如下：

store.subscribe()（注冊事件） —>狀態(tài)更新時調(diào)用 mapStateToProps（一個selector，返回 state） —> 調(diào)用 state 計算函數(shù) selectTodos

那么，問題 來了，如果 slector 的計算量比較大，每次更新的重新計算就會造成性能問題。

而解決性能問題的 出發(fā)點 就是：避免不必要的計算。

解決問題的方式：從 selector 著手，即 mapStateToProps，如果 selector 接受的狀態(tài)參數(shù)不變，那么就不調(diào)用計算函數(shù)，直接利用之前的結(jié)果。

二、reselect 閃亮登場

reselect 其實就是 redux 的一個中間件，它通過計算獲得新的 state，然后傳遞到 Redux Store。其主要就是進行了中間的那一步計算，使得計算的狀態(tài)被緩存，從而根據(jù)傳入的 state 判斷是否需要調(diào)用計算函數(shù)，而不用在組件每次更新的時候都進行調(diào)用，從而更加高效。

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)生的結(jié)果都會傳到最后一個函數(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);

參考

React-redux性能優(yōu)化
翻譯|Redux的中間件-Reselect