react-redux性能優化之reselect

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

1、存在的性能問題

以 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

【邏輯圖】：

以前 connect 函數實現的時候，咱們知道映射 props 的函數被 store.subscribe() 了，所以每次組件更新的時候，不管 state 是否改變，都會調用 mapStateToProps，而 mapStateToProps 在計算 state 的時候就會調用 state 計算函數，過程 以下：

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

那麼，問題 來了，若是 slector 的計算量比較大，每次更新的從新計算就會形成性能問題。

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

解決問題的方式：從 selector 着手，即 mapStateToProps，若是 selector 接受的狀態參數不變，那麼就不調用計算函數，直接利用以前的結果。

2、reselect 閃亮登場

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

1. reselect 理論理解

Reselect Selector 會經過傳入的不一樣 state 進行計算，獲得計算後的數據。

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