我试图了解 mapStateToProps 返回函数时的机制。

所以我找不到太多的文档，除了 Redux 文档的一个简短摘录，它通过返回一个函数提前说明情况，每个实例都会得到自己的内存 mapStateToProps 和另一个用户说这是一种防止 mapStateToProps 被要求更改任何父属性。

所以这对于列表项来说似乎很棒，我不想为不影响项目的任何更改重新呈现大型项目列表。

所以让我感到困惑的部分是 mapStateToProps 不会因任何父属性更改而被调用，这是否意味着为了重新呈现单个列表“Item”，它需要成为它的智能连接组件获取它关心的更改并重新渲染？或者这是否意味着它永远不会为这个特定的 Item 实例重新呈现？

更新:

想澄清一下，我正在专门谈论 mapStateProps 的工厂功能版本。

这是我正在谈论的功能，摘自 React-Redux 文档:

注意:在需要对渲染性能进行更多控制的高级场景中，mapStateToProps() 也可以返回一个函数。在这种情况下，该函数将用作特定组件实例的 mapStateToProps() 。这允许您进行每个实例的内存。您可以引用#279 及其添加的测试以获取更多详细信息。大多数应用永远不需要这个。

摘自这篇文章的段落:

https://medium.com/@cvetanov/redux-mapstatetoprops-optimization-5880078a8a7a

如果 redux 收到一个返回函数的实现，它会执行一个闭包来包装组件自己的 props，因此每次组件更改它从父组件接收到的 props 时，都会绕过 mapStateToProps 的调用。它创建了一个所谓的 purePropsSelector。可以在此处查看这是如何完成的。

更新 2:

对，我正在调查提到跳过的文章，它似乎是当你将自己的 Prop 包裹在一个闭包中并返回一个只使用状态的函数时。因此，当每个“已连接”子项的父属性更改时，它可以防止调用 mapStateToProps。

这是摘 self 在上面阅读的那篇媒体文章:

function mapStateToPropsFactory(initialState, ownProps) {
  // a closure for ownProps is created
  // this factory is not invoked everytime the component
  // changes it's props
  return function mapStateToProps(state) {
    return {
      blogs:
        state.blogs.filter(blog => blog.author === ownProps.user)
    };
  };
}
export default connect(mapStateToPropsFactory)(MyBlogs);

最佳答案

如果状态发生变化，每个 mapStateToProps 函数都会被调用。 redux 中没有包含阻止调用 mapStateToProps 的机制。

From the docs for connect():

mapStateToProps(state, [ownProps]): stateProps] (Function): If this argument is specified, the new component will subscribe to Redux store updates. This means that any time the store is updated, mapStateToProps will be called.

您想要防止(通常通过使用选择器)发生在 mapStateToProps 内部的昂贵计算将在每次状态更新时重复，即使它们产生相同的结果。

Or does that mean it will never re-render for this particular Item instance?

如果连接组件收到的任何 Prop 发生变化，它将照常重新渲染。重点是防止 mapStateToProps 进行昂贵的计算。 mapStateToProps 是愚蠢的。它进行计算并将它们作为 Prop 传递给连接的组件。然后该组件检查 Prop 是否与以前的 Prop 不同，并决定基于此重新渲染。

考虑这个使用选择器 getVisibleTodos 的 mapStateToProps 函数:

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

选择器会记住调用的结果，只要输入参数不变，就会在后续调用中简单地返回该结果。本例中的选择器仅从 redux 状态获取输入。只要 state.todos 和 state.visibilityFilter 不改变，它就可以使用上次调用的内存结果，不需要重新计算。

现在考虑另一个例子:

const TodoList = ({id, todos}) => (
  <ul id={id}>
    {todos.map(/* ... */)}
  </ul>
);

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

export default connect(mapStateToProps)(TodoList);

这次选择器另外将组件自己的属性作为输入。这是有问题的，因为如果我们使用连接的 TodoList 的两个实例并将其呈现为

<TodoList id="list1" />
<TodoList id="list2" />

这将导致 mapStateToProps 在状态更新时被调用两次，每个 TodoList 实例调用一次。并且两次它都会收到不同的 Prop 。一次使用 {id: 'list1'}，第二次使用 {id: 'list2'}。但是这两个组件共享相同的选择器。这将导致选择器重新计算，即使每个单独的 TodoList 的 todos 没有改变。现在自己返回一个函数的mapStateToProps函数就派上用场了:

const makeMapStateToProps = () => {
  const getVisibleTodos = makeGetVisibleTodos() // this creates a new selector function
  const mapStateToProps = (state, props) => {
    return {
      todos: getVisibleTodos(state, props)
    }
  }
  return mapStateToProps
}

这为 TodoList 的每个实例创建了一个单独的 mapStateToProps 函数，它有自己的选择器，因此它会单独记住每个实例的属性，并且只有在以下情况下才会重新计算它是为更改而创建的实例的 Prop 。这将解决前面示例中的问题。

所以 tl;dr;:当 mapStateToProps 中的选择器将连接组件的自己的 props 作为参数时，您需要使用 mapStateToProps 作为工厂以允许用于每个实例的内存。

您可以在 Comuting Derived Data 下找到更详细的示例说明在 redux 文档中。

关于javascript - Redux - 了解返回函数的高级 mapStateToProps，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50006884/