1

我正在寻找提高我的 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

在这种情况下，getVisibleTodos不会调用除非todos或visibilityFilter更改。正确的？我的修改和选择器一样吗？我错过了什么吗？

4

1 回答 1

2

不，getVisibleTodos仍然会被调用，并会在VisibleTodoList重新渲染时重新计算。

此外，由于 `VisibleTodoList` 是一个函数式组件，它会在其父组件每次更新时重新渲染。所以不，您的代码和 Reselect 的行为不同。我猜你想要的是一个类组件，然后手动添加`shouldComponentUpdate`来比较`todos`和`visibilityFilter`，这样就可以避免不必要的计算。


VisibleTodoList由connectreact-redux 包裹，react-redux 已经shouldComponentUpdate为你提供了一个。

但即使你使用shouldComponentUpdateor connect，它仍然不如 Reselect 优化。因为当您在 All、Active 或 Completed 选项卡之间切换时，getVisibleTodos将会调用并且会有很多重复的重新计算。（重新选择缓存这些结果，所以没有重复的重新计算）

于 2017-03-23T06:24:06.260 回答