reactjs - Redux Reselect备忘录如何工作？

我试图将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>
)

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

注意最后一句话。如果我们传递不同的id s并应根据id s返回不同的值，为什么还要返回缓存的值？

最佳答案

因此，我们有了这个选择器来获取VisibleTodoList组件的状态:

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

如果我们渲染组件:

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

然后，选择器将被调用为:getVisibleTodos(state, { listId: 1 })，并且选择器将结果(todo list 1对象)存储(内存)在内存中。

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

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

选择器被调用，结果被记忆化

选择器

第二次被调用，它发现{ listId: 1 }与第一次具有相同的prop参数，因此它只返回备注值。

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

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

选择器被调用，结果被记忆化

选择器

第二次被调用，它发现{ listId: 2 }与第一次{ listId: 1 }是不同的props args，因此它在内存中重新计算并记住新结果(todo list 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)
        }
    }
}

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

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

带有<VisibleTodoList listId="1" />的

调用选择器的第一个实例，并记录结果

与<VisibleTodoList listId="2" />一起调用选择器的另一个实例，并记录结果

关于reactjs - Redux Reselect备忘录如何工作？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52607573/