web-dev-qa-db-fra.com

React.useMemo dans le composant de classe

Existe-t-il un moyen d'utiliser ce hook ou un autre analogue de l'API React dans le cas d'un composant de classe?

Je me demande, devrais-je utiliser des aides de mémo tiers dans le cas d'un composant de classe (par exemple. mémo lodash, memoizeOne, etc.) ou il en existe manière officielle d'API de réaction pour les composants de classe.

Merci pour toute aide.

P.S.

Je veux générer uuid dans le cas d'enfants modifiés.

avec le composant SFC, je pourrais utiliser useMemo comme ça

const keyValue = useMemo(() => uuid()(), [children])

Mais comment faire de même pour les composants basés sur les classes sans aucun tiers, etc.
P.P.S. Je n'utilise pas Redux, etc. uniquement React.js pur

reactjsmemoizationreact-usememo
2
Velidan

Selon React docs :

Si vous voulez recalculer certaines données uniquement lorsqu'un accessoire change , tilisez un assistant de mémorisation .

La documentation utilise memoizeOne comme bibliothèque, donc ce serait un bon choix. Vous pouvez également modifier keyValue dans le cadre d'un effet secondaire avec componentDidUpdate :

componentDidMount() {
  this.keyValue = uuid()()
}

componentDidUpdate(prevProps) {
  if (this.props.children !== prevProps.children) {
    this.keyValue = uuid()()
    // alternative: store keyValue as state to trigger re-render
  }
}

getDerivedStateFromProps peut être une alternative pour de rares cas, d'autres options sont généralement préférées .

Pourquoi useMemo n'est pas un bon choix avec uuid()

Vous pouvez compter sur useMemo comme une optimisation des performances, pas comme une garantie sémantique. À l'avenir, React peut choisir pour "oublier" certaines valeurs précédemment mémorisées et les recalculer au prochain rendu, par exemple pour libérer de la mémoire pour les composants hors écran. ( docs )

Une valeur mémorisée const keyValue = useMemo(() => uuid()(), [children]) peut être recalculée bien que children soit la même dans React future. Ce cas pourrait entraîner des incohérences, si uuid() renvoie un nouvel identifiant, mais children n'a pas changé.

Pour les composants de fonction, une alternative est useRef avec useEffect selon votre cas d'utilisation.

1
ford04

Utilisez getDerivedStateFromProps . La documentation officielle React docs mentionne cette technique ici .

À partir de la version 16.3, la méthode recommandée pour mettre à jour l'état en réponse aux changements d'accessoires est avec le nouveau cycle de vie statique getDerivedStateFromProps.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      values: props.values,
      childrenIds: []
    };
  }

  static getDerivedStateFromProps(props, state) {
    if (props.values !== state.values) {
      return {
        values: props.values,
        childrenIds: generateIds(props.values)
      };
    }
    return null;
  }

  render() {
    return JSON.stringify(this.state.childrenIds);
  }
}
0
resolritter