什么是重新选择它如何通过redux提高性能

If you haven’t read about redux you should at least read about it. I assume that you have done your research and know what redux is.

如果您还没有阅读有关redux的文章，那么至少应该阅读一下。 我假设您已完成研究并知道什么是redux。

To learn what redux is and set up redux feel free to read this article:

要了解什么是redux并设置redux，请随时阅读以下文章：

For a brief summary, redux is a global state container that is used to manage global data flow within the whole application.

简要来说，redux是一个全局状态容器，用于管理整个应用程序中的全局数据流。

Instead of having different components within the same application to pass data to each other, these components can all access and communicate the same piece of data through this global state container.

这些组件可以通过此全局状态容器访问和传递相同的数据，而不必在同一应用程序中使不同的组件相互传递数据。

One common problem with redux is with a connected component, mapStateToProps gets called every time when global state changes. That’s fine if I only have a few variables in the redux. What if my connect component is connected to a several bunch?

Redux的一个常见问题是连接的组件，每次全局状态更改时都会调用mapStateToProps。 如果我在redux中只有几个变量，那很好。 如果我的连接组件连接了几束怎么办？

Enters reselect.

输入重新选择。

To understand reselector, we need to first understand what selectors are?

要了解重新选择器，我们首先需要了解什么是选择器？

A selector is a function that returns a subset of data from a larger collection.

选择器是一种从较大集合中返回数据子集的函数。

In our case, this subset of data is whatever variable we are pulling from the reducer. The collection would be the reducer itself.

在我们的例子中，数据的这个子集就是我们从减速器中提取的任何变量。 该集合将是减速器本身。

Let’s say we have the following component:

假设我们具有以下组件：

import React from "react";
import { connect } from "react-redux";
import { getFruitOne, getFruitTwoSelector } from "../selectors/fruitSelector";


const FruitComponent = (props) => {
  return (
    <div>
      <div>Fruit One: {props.fruitOne} </div>
      <div>Fruit Two: {props.fruitTwo} </div>
    </div>
  );
};
const mapStateToProps = (state) => {
  return {
    fruitOne: getFruitOne(state), 
    fruitTwo: state.simpleReducer.fruitTwo
  };
};


export default connect(mapStateToProps, null)(FruitComponent);

and the following selector class(if you have been following https://medium.com/@kaleongtong282/how-to-set-up-redux-thunk-on-a-react-project-79b0c29c96db, then create a selector folder under the src folder and create a selector class:

和以下选择器类(如果您一直在关注https://medium.com/@kaleongtong282/how-to-set-up-redux-thunk-on-a-react-project-79b0c29c96db ，则在下面创建一个选择器文件夹src文件夹并创建一个选择器类：

import { createSelector } from "reselect";


const getFruitOneSelector = (state) => {
  return state.simpleReducer.fruitOne;
};


export const getFruitOne = createSelector(
  [getFruitOneSelector],
  (getFruitOneSelector) => {
    console.log("get fruit One");
    return getFruitOneSelector;
  }
);

Above in the FruitComponent, if there are any changes to its local state or props(whether it is through redux or parent passing different values down), fruitTwo gets recalculated every time.

在FruitComponent的上方，如果其本地状态或props有任何更改(无论是通过redux还是通过parent传递不同的值)，每次都会重新计算fruitTwo。

Here’s where reselect can be a bit brilliant.

在这里重新选择可能会很出色。

With reselect, fruitOne only gets computed when the actual value changes. FruitTwo, on the other hand, gets computed again only simply because the reducer experienced change.

通过重新选择，只会在实际值更改时才计算fruitOne。 另一方面，FruitTwo仅由于减速器经历了更改而再次进行了计算。

On the other hand, if fruitTwo’s value changed, fruitTwo will get recalculated but fruitOne remains the sample.

另一方面，如果fruitTwo的值发生更改，则将重新计算fruitTwo，但fruitOne仍为样本。

Reselect memoizes the value of fruitOne and will only return a new piece of data if it senses the value is changed in the redux.

重新选择将记住fruitOne的值，并且仅在感觉到redux中的值已更改时才返回新数据。

Here is a screenshot to demonstrate how that will look like in a react application:

这是一个截图，演示了在React应用程序中的外观：

Even though fruitTwo’s value did not get changed, it still gets recalculated because of a state change to fruitOne.

即使fruitTwo的值未更改，但由于状态为fruitOne的更改，它仍然需要重新计算。

That’s it! You just learned how to create selectors to optimize your application’s performance.

而已！ 您刚刚学习了如何创建选择器以优化应用程序的性能。

翻译自: https://medium.com/weekly-webtips/what-is-reselect-how-it-improves-performance-with-redux-c22351e3f82f