[Documentation] Add information about `child.key` to `React.Children.map`
Personne n'a encore pris cette issue.
- Langage dominant
- JavaScript
- Étoiles
- 11.8k
- Forks
- 7.9k
- Merge moyen
- 1 j 11 h
- PR mergées (30 j)
- 11
Description
I just spent quite a while debugging a performance issue when reordering a large list of components, which were wrapped in React.Children.map.
The issue was the implementation of the wrapping component, which used the index as the key, which caused the entire list to re-render from scratch:
<div>
{React.Children.map(props.children, (child, index) => (
<div key={index} className='...'>{child}</div>
))}
</div>
The solution was to use child.key and pass it into the child-component, which then, in turn, made the memoization of the child components work as expected:
<div>
{React.Children.map(props.children, (child) => (
<div key={child.key} className='...'>{child}</div>
))}
</div>
I feel like this should be mentioned somewhere on the documentation page for React.Children.map, since I only figured out that this is possible at all after specifically searching for it and finding #10432.
I'm happy to update the docs in a PR if this gets the OK :)
Guide de contribution
Ouvrir le guide de contribution
Par où commencer
- Lisez l'issue en entier, puis le guide de contribution du projet.
- Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
- Forkez le dépôt et travaillez sur une branche.
- Ouvrez une pull request qui référence le numéro de l'issue.
Piste de recherche
Commencez par la section React.Children.map de la page de documentation de l’API React liée dans l’issue, puis examinez la discussion associée dans l’issue #10432. Ajoutez des informations claires sur child.key et son importance lors de l’encapsulation des children, puis vérifiez que la documentation explique l’utilisation prévue et la considération liée aux performances.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- javascript, react
- Domaine
- documentation
- Type d'issue
- Documentation
- Difficulté
- 2/5
- Temps estimé
- 1-3 heures
- Activité
- À l'abandon
- Clarté
- Clairement spécifiée
- Accessibilité débutants
- 55/100