在React-redux深入理解中，我們知道了 react-redux 是如何將 React 和 Redux 進行連接的，今天來說一下其中存在的性能問題以及改進的方式。

一、存在的性能問題

以 Redux 官網的 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 計算函數
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 函數實現的時候，我們知道映射 props 的函數被 store.subscribe() 了，因此每次組件更新的時候，無論 state 是否改變，都會調用 mapStateToProps，而 mapStateToProps 在計算 state 的時候就會調用 state 計算函數，過程 如下：

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

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

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

解決問題的方式：從 selector 著手，即 mapStateToProps，如果 selector 接受的狀態參數不變，那么就不調用計算函數，直接利用之前的結果。

二、reselect 閃亮登場

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

1. reselect 理論理解

Use reselect

Reselect Selector 會通過傳入的不同 state 進行計算，得到計算后的數據。

reselect explained

selector 的作用：將多個 state 進行計算后生成新的 state

2. 采用 reselect，更新 App 組件：

// 不用 reselect 的缺點：每次組件更新的時候都會重新計算 visibleTodos
/*const mapStateToProps = (state) => ({
    visibleTodos: selectTodos(state.todos, state.visibilityFilter),
    visibilityFilter: state.visibilityFilter
});*/

// 采用 reselect 后，相當于記憶緩存，會緩存狀態
// 如果 state.todos 和 state.visibilityFilter 發生變化，它會重新計算 state
// 但是發生在其他部分的 state 變化，就不會重新計算
const getTodos = (state) => state.todos;
const getVisibilityFilter = (state) => state.visibilityFilter;

// getTodos 和 getVisibilityFilter 返回的參數將傳入 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 即是一個對象，包含了狀態屬性和方法
 * connect作用：即使 Dumb 組件從 store 中獲取數據
 */
// 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;

// 參數名字無所謂
const getPosts = (posts, selectedPostIds) => {
    const selectPosts = _.filter(
        posts,
        post => _.contains(selectedPostIds, post.id)
    );

    return selectPosts;
}

/**
 * 前面幾個參數：state selecting functions，當 state 改變時，這些函數都會被執行
 * 前面這些參數產生的結果都會傳到最后一個函數
 */
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性能優化
翻譯|Redux的中間件-Reselect