reactjs - Redux Reselect 内存是如何工作的？

Question

我正在尝试集成reselect进入我当前的应用程序，一如既往，首先我开始阅读文档，然后如果需要，再阅读另一个资源。我无法理解文档的一个特殊部分，也找不到可以更清晰地解释的资源。现在我来这里是为了得到一些明确的解释。所以它在文档中说`

import React from 'react'
import Footer from './Footer'
import AddTodo from '../containers/AddTodo'
import VisibleTodoList from '../containers/VisibleTodoList'

const App = () => (
  <div>
    <VisibleTodoList listId="1" />
    <VisibleTodoList listId="2" />
    <VisibleTodoList listId="3" />
  </div>
)

Using the getVisibleTodos selector with multiple instances of the VisibleTodoList container will not correctly memoize:

import { connect } from 'react-redux'
import { toggleTodo } from '../actions'
import TodoList from '../components/TodoList'
import { getVisibleTodos } from '../selectors'

const mapStateToProps = (state, props) => {
  return {
    // WARNING: THE FOLLOWING SELECTOR DOES NOT CORRECTLY MEMOIZE
    todos: getVisibleTodos(state, props)
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    onTodoClick: (id) => {
      dispatch(toggleTodo(id))
    }
  }
}

const VisibleTodoList = connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList)

export default VisibleTodoList

A selector created with createSelector has a cache size of 1 and only returns the cached value when its set of arguments is the same as its previous set of arguments. If we alternate between rendering <VisibleTodoList listId="1" /> and <VisibleTodoList listId="2" />, the shared selector will alternate between receiving {listId: 1} and {listId: 2} as its props argument. This will cause the arguments to be different on each call, so the selector will always recompute instead of returning the cached value.

注意最后一句。如果我们传递不同的 id 为什么要返回缓存值s 并且它应该返回不同的值取决于 id ?

Answer 1

所以我们让这个选择器获取 VisibleTodoList 的状态组件:

const mapStateToProps = (state, props) => {
  return {
    todos: getVisibleTodos(state, props)
  }
}

如果我们渲染组件:

return (
    <div>
        <VisibleTodoList listId="1" />
    </div>
)

然后，选择器被调用，如: getVisibleTodos(state, { listId: 1 }) ，选择器将结果(待办事项列表 1 对象)存储(内存)在内存中。

如果我们使用相同的 props 渲染组件两次:

return (
    <div>
        <VisibleTodoList listId="1" />
        <VisibleTodoList listId="1" />
    </div>
)

1. 选择器被调用并且结果被内存

2. 选择器被第二次调用，它看到 { listId: 1 }与第一次的 prop 参数相同，因此它只返回内存值。

如果我们使用不同的 props 渲染组件两次:

return (
    <div>
        <VisibleTodoList listId="1" />
        <VisibleTodoList listId="2" />
    </div>
)

1. 选择器被调用并且结果被内存

2. 选择器被第二次调用，它看到 { listId: 2 }与第一次 { listId: 1 } 的 props args 不一样，因此它会重新计算新结果(待办事项列表 2 对象)并将其存储在内存中(覆盖之前的存储)。

如果我们希望每个组件都有自己的内存，每个组件实例必须有自己的选择器实例。

例如:

// selector
const makeGetVisibleTodos = () => createSelector(
    // ... get the visible todos
);

// each has their own memoization space:
const foo = makeGetVisibleTodos(); // this is an instance
const bar = makeGetVisibleTodos(); // this is a separate instance

因此将其应用于组件:

// component
const mapStateToProps = () => {
    const getVisibleTodos = makeGetVisibleTodos(); // this instance get bound to the component instance

    return (state, props) => {
        return {
            todos: getVisibleTodos(state, props)
        }   
    }
}

现在，如果我们使用不同的 props 渲染组件两次:

return (
    <div>
        <VisibleTodoList listId="1" />
        <VisibleTodoList listId="2" />
    </div>
)

1. 与 <VisibleTodoList listId="1" />选择器的第一个实例被调用，结果被内存

2. 与 <VisibleTodoList listId="2" />选择器的不同实例被调用，结果被内存