Javascript Redux中的Todo列表示例中真的需要重新选择吗？

我正在寻找提高React应用程序性能的方法。经过一些搜索，我开始重新选择。但我不知道它是如何工作的

在该示例中，它表示每次更新组件时都会计算

todos

，这会影响性能。因此，它引入了记忆选择器来克服它

如果我将

getVisibleTodos

放在组件

render

函数中，会有区别吗？我想做的是：

containers/VisibleTodoList.js

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

const getVisibleTodos = (todos, filter) => {
  switch (filter) {
    case 'SHOW_ALL':
      return todos
    case 'SHOW_COMPLETED':
      return todos.filter(t => t.completed)
    case 'SHOW_ACTIVE':
      return todos.filter(t => !t.completed)
  }
}

/*const mapStateToProps = (state) => {
  return {
    todos: getVisibleTodos(state.todos, state.visibilityFilter)
  }
}*/

const mapStateToProps = (state) => {
  return {
    todos: state.todos,
    visibilityFilter: state.visibilityFilter
}

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

const VisibleTodoList = ({todos, visibilityFilter, ...props}) => {
  const visibleTodos = getVisibleTodos(todos, visibilityFilter);
  return (
    <TodoList todos={visibleTodos} {...props} />
  )
}

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

export default ConnectedVisibleTodoList

从“React”导入React
从“react redux”导入{connect}
从“../actions”导入{toggleTodo}
从“../components/TodoList”导入TodoList
常量getVisibleTodos=（todos，过滤器）=>{
开关（过滤器）{
“全部展示”案例：
返回待办事项
案例“SHOW_COMPLETED”：
返回todos.filter（t=>t.completed）
案例“SHOW_ACTIVE”：
返回todos.filter（t=>！t.completed）
}
}
/*常量mapStateToProps=（状态）=>{
返回{
todos:getVisibleTodos（state.todos，state.visibilityFilter）
}
}*/
常量mapStateToProps=（状态）=>{
返回{
待办事项：state.todos，
visibilityFilter:state.visibilityFilter
}
const mapDispatchToProps=（调度）=>{
返回{
onTodoClick：（id）=>{
调度（切换到（id））
}
}
}
常量VisibleTodoList=（{todos，visibilityFilter，…props}）=>{
const visibleTodos=getVisibleTodos（todos，visibilityFilter）；
返回(
)
}
const connectedVisibleTolist=connect(
MapStateTops，
mapDispatchToProps
)（VisibleTolist）
导出默认的ConnectedVisibleTolist

---

在这种情况下，除非

todos

或

visibilityFilter

更改，否则将不会调用

getVisibleTodos

。对吗？我的修改是否与选择器的操作相同？我是否缺少某些内容？

否，

getVisibleTodos

仍将被调用，并在

VisibleTodoList

重新呈现时重新计算

此外，由于“VisibleTodoList”是一个功能组件，因此每当其父组件进行更新时，它都会重新呈现。 因此，您的代码和重新选择的行为不同。我想您需要的是类组件，并添加'shouldComponentUpdate'，手动比较'todos'和'visibilityFilter'，这样您就可以避免不必要的计算。

VisibleTodoList

由react-redux的

connect

包装，react-redux已经为您提供了一个

shouldComponentUpdate

---

但是，即使您使用

shouldComponentUpdate

或

connect

，它仍然不如Reselect优化。因为当您在所有、活动或完成的选项卡之间切换时，将调用

getVisibleTodos

，并且将有大量重复的重新计算。（重新选择缓存这些结果，因此不存在重复的重新计算）

不要优化你无法衡量的东西。@zerkms我想这就是他寻求帮助的原因。@RafaelBerro我不这么认为，他们要求提供一般性建议。谢谢你的帮助！但我想知道

VisibleTodoList

是否真的会在父组件每次更新时都重新呈现。据我所知，组件包装在中e> connect将在重新渲染之前检查任何状态/道具的更改。这让我想到如果已经存在此类检查，则使用Reselect的要点/优点。是的，你是对的。

react redux

中有一些优化。在该示例中，输入选择器之一是

getVisibilityFilter

。因此我认为即使使用t使用选择器时，如果在这些选项卡之间切换，组件将被重新呈现。当然，组件将被重新呈现。但重新选择的点是记忆。它缓存

getVisibilityFilter

的结果，因此不需要每次都执行

todos.filter（…）