reactjs / reactjs/react.dev

Render Props and PureComponent docs question/improvement opportunity

Ouverte
#825 4 commentaires 1 réaction 0 personnes assignées Voir sur GitHub

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

https://github.com/reactjs/reactjs.org/blob/b4b68460e2377837df6e1826e77af173dc205f4f/content/docs/render-props.md

In the above link, the last section ("Caveats") talks about how one can avoid killing PureComponents benefits by pulling the render prop function out into an instance method. I understand why this is the case; the 'anonymous' function 'pointer' would change every render, so it isn't seen as something that didn't change, and the PureComponent would re-render all the time.

However, it says you can't do that with a PureComponent if the instance method / render prop needs to reference the component's state/props:

In cases where you cannot define the prop statically (e.g. because you need to close over the component's props and/or state) <Mouse> should extend React.Component instead.

I don't really understand why that is a limitation, so I'm proposing this as both a question and a suggestion for an update to the docs. I've never used or really looked into PureComponent, but from a look at the docs for them it seems like they re-render if a shallow comparison of it's props/state shows a difference. If that's the case, why wouldn't an instance function on Mouse that used it's own props/state work with PureComponent? The Mouse would re-render if one changed.

(Is it because the Cat - the child component of the render prop Mouse - wouldn't re-render, even though it's parent would?)

Guide de contribution

Ouvrir le guide de contribution

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Piste de recherche

Lisez content/docs/render-props.md, en particulier la dernière section « Caveats » et ses indications concernant PureComponent. Clarifiez pourquoi une méthode d’instance utilisée comme render prop et qui utilise props ou state est décrite comme incompatible avec PureComponent, notamment en précisant si le comportement de rendu de l’enfant a de l’importance. Le travail est terminé lorsque la documentation répond directement à cette question et explique la limitation concernée.

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é
3/5
Temps estimé
1-2 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
35/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.