web-dev-qa-db-fra.com

Empêcher Component/PureComponent avec des composants stylés de restituer tous les éléments après le changement d'état

Après avoir ajouté des composants stylés à cet exemple, nous avons constaté que notre composant de liste met tout à jour lorsque tout un élément en état est modifié.

Les surlignages de rendu de liste (de React dev-tools) sont excessifs lors de l'ajout/la suppression d'une entrée unique. Un élément est supprimé/ajouté, puis tous les éléments sont mis en surbrillance.

 enter image description here

exemples de code

Voici un exemple du composant de liste de droite (CategorizedList.js)

import styled from "styled-components";

const Item = styled.li`
  color: #444;
`;

class CategorizedList extends PureComponent {
  render() {
    return (
      <div>
        {this.props.categories.map(category => (
          <ul>
            <li key={this.props.catStrings[category]}>
              {this.props.catStrings[category]}
            </li>
            <ul>
              {this.props.items.map((item, index) =>
                item.category === category ? (
                  <div key={item.label + index}>
                    <Item>{item.label}</Item>
                  </div>
                ) : null
              )}
            </ul>
          </ul>
        ))}
      </div>
    );
  }
}

Préférence

Je préférerais utiliser PureComponent pour que shouldComponentUpdate()soit traité automatiquement .

Question

Comment pouvons-nous nous assurer que seuls les objets modifiés dans l'état items sont restitués?

reactjsstyled-componentsreact-dom
7
Chance Smith

Si les données changent, la vue sera rendue à nouveau. Ce processus ne devrait pas être coûteux, car il se produit une fois lors de l'action d'ajout/suppression. Si vous rencontrez des problèmes de performances, cela peut être causé par autre chose.

En général, c’est la façon dont vous pouvez contrôler certains composants restitués: https://reactjs.org/docs/react-api.html#reactmemo

1
Eran