javascript - 为什么这段代码同时使用 useMemo 和 createSelector？

Question

The React-Redux documentation provides this example for when a selector is used in multiple component instances and depends on the component's props.

import React, { useMemo } from 'react'
import { useSelector } from 'react-redux'
import { createSelector } from 'reselect'

const makeNumOfTodosWithIsDoneSelector = () =>
  createSelector(
    state => state.todos,
    (_, isDone) => isDone,
    (todos, isDone) => todos.filter(todo => todo.isDone === isDone).length
  )

export const TodoCounterForIsDoneValue = ({ isDone }) => {
  const selectNumOfTodosWithIsDone = useMemo(
    makeNumOfTodosWithIsDoneSelector,
    []
  )

  const numOfTodosWithIsDoneValue = useSelector(state =>
    selectNumOfTodosWithIsDone(state, isDone)
  )

  return <div>{numOfTodosWithIsDoneValue}</div>
}

export const App = () => {
  return (
    <>
      <span>Number of done todos:</span>
      <TodoCounterForIsDoneValue isDone={true} />
      <span>Number of unfinished todos:</span>
      <TodoCounterForIsDoneValue isDone={false} />
    </>
  )
}

在函数 TodoCounterForIsDoneValue ，作者为什么要换行 makeNumOfTodosWithIsDoneSelector与 useMemo ?我对 createSelector 的理解来自 reselect是它生成了一个内存选择器，那么“双重”内存这个选择器的目的是什么？

Answer 1

因为每个组件都需要自己唯一的选择器实例来正确内存行为。如果许多组件使用相同的选择器实例，并且每个组件都传入自己不同的参数(例如 selectThingById(state, props.itemId) )，则选择器永远不会正确内存。通过为每个组件创建一个唯一的实例，每个选择器可以传入自己单独的参数并获得一致的内存。