After creating some sections with FlatList components to render a list of items, I realised that the sections containing this kind of list with a lot of items, weren’t running smooth on slow devices. In fact, it was lagging a lot while trying to open the section container, and clicking on an item to trigger its action took a while.

在使用FlatList组件创建了一些部分以呈现项目列表之后，我意识到包含此类列表以及许多项目的部分在慢速设备上运行不流畅。 实际上，在尝试打开节容器时，它滞后了很多时间，单击某个项目以触发其动作花费了一段时间。

After investigating what was happening, the team discovered that the cause of the slow performance was that all the FlatList options were rerendered when just one of them changed its state. Let’s see how we managed to only rerender the option whose state changed and don’t bother the unaffected ones.

在调查了所发生的情况之后，该团队发现性能下降的原因是当其中只有一个更改其状态时， 所有 FlatList选项都被重新呈现。 让我们看看我们如何只重新呈现状态已更改的选项，而不会打扰那些未受影响的选项。

FlatList基本示例：默认情况下重新渲染所有项目 (FlatList basic example: All items rerender by default)

Originally, our components that use FlatList looked something like this:

最初，我们使用FlatList的组件看起来像这样：

On the SelectOptions file, we have our FlatList that calls to the renderOptionItem method defined on this same file. We’re checking if the option has been selected or unselected, depending on the selection state, we apply different styles.

在SelectOptions文件上，我们有FlatList调用此文件上定义的renderOptionItem方法。 我们正在检查选项是否已选中或未选中，具体取决于选择状态，我们将应用不同的样式。

If we check renderOptionItem method with a console.log, we’ll see that if one option changed its state, this option rerendered (ok!) as well as the rest of options (nope!).

如果我们用console.log检查renderOptionItem方法，我们将看到，如果一个选项更改了其状态，则此选项将重新呈现(确定！)，以及其余选项(不可以！)。

将renderOptionItem移至新组件 (Moving renderOptionItem to a new component)

The first thing we need to do is to moverenderOptionItem to a new component, and to call it from SelectOptions :

我们需要做的第一件事是将renderOptionItem移至新组件，并从SelectOptions进行调用：

OptionItem has been created as a functional component because it doesn’t need to manage its state nor have access to the lifecycle methods. The data it needs is passed as props from the SelectOptionscomponent.

OptionItem已被创建为功能组件，因为它不需要管理其状态，也不需要访问生命周期方法。 所需的数据作为道具从SelectOptions组件传递的。

使用React.memo改善功能组件的性能 (Improving functional components performance with React.memo)

On functional components, we use React.memo to boost the performance of the FlatList by memoizing the result, according to React.memo documentation:

根据React.memo文档，在功能组件上，我们使用React.memo通过记录结果来提高FlatList的性能：

If your function component renders the same result given the same props, you can wrap it in a call to React.memo for a performance boost in some cases by memoizing the result. This means that React will skip rendering the component, and reuse the last rendered result.

如果您的功能组件使用相同的道具呈现相同的结果，则可以将其包装在对React.memo的调用中，以在某些情况下通过React.memo来提高性能。 这意味着React将跳过渲染组件，并重用最后渲染的结果。

We need to create a function that compares the new and previous props passed to OptionItem , on this case, the function is calledareEqual.

我们需要创建一个函数，将传递给OptionItem的新道具和先前道具进行OptionItem ，在这种情况下，该函数称为areEqual 。

Then, on the export, instead of using export default OptionItem; we use export default React.memo(OptionItem, areEqual); This way, we’re checking if the option has changed its selected state: If the new state is the same as the previous, the option won’t be rerendered, but if the option, for example, has been checked, it will be rerendered.

然后，在导出时，使用export default OptionItem;代替export default OptionItem; 我们使用export default React.memo(OptionItem, areEqual); 这样，我们正在检查选项是否已更改其选定状态：如果新状态与以前的状态相同，则不会重新呈现该选项，但是例如，如果该选项已被选中，它将被重新显示。重新提交。

使用shouldComponentUpdate改善类组件的性能 (Improving class components performance with shouldComponentUpdate)

If you prefer to use class components, you can do this performance optimization by using shouldComponentUpdate, according to the documentation:

如果您更喜欢使用类组件，则可以根据文档使用shouldComponentUpdate进行性能优化：

Use shouldComponentUpdate() to let React know if a component’s output is not affected by the current change in state or props. The default behavior is to re-render on every state change, and in the vast majority of cases you should rely on the default behavior.

使用shouldComponentUpdate()可以让React知道组件的输出是否不受当前状态或道具更改的影响。 默认行为是在每次状态更改时重新呈现，并且在大多数情况下，您应该依赖默认行为。

The method shouldComponentUpdatetakes care of comparing the previous selected state with the new one.

方法shouldComponentUpdate负责将先前选择的状态与新的状态进行比较。

Now, if adding a console.log on the OptionItemcomponent, we can see that only the changing item is rendered :)

现在，如果在OptionItem组件上添加console.log ，我们可以看到仅呈现了更改的项目：)