componentWillReceiveProps, componentDidUpdate pour React Hook

Vous pouvez utiliser le hook useMemo pour stocker un calcul et placer props.count dans le tableau donné comme second argument pour recalculer la valeur lorsqu'elle change.

<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

<div id="root"></div>

const { useState, useEffect } = React;

function App() {
  const [groupName, setGroupName] = useState('foo');
  const [companyName, setCompanyName] = useState('foo');

  useEffect(() => {
    setTimeout(() => {
      setGroupName('bar');
    }, 1000);
    setTimeout(() => {
      setCompanyName('bar');
    }, 2000);
  }, []);

  return <DisplayGroupCompany groupName={groupName} companyName={companyName} />;
}

function DisplayGroupCompany(props) {
  useEffect(() => {
    console.log("Let's say, I do want to do some task here only when groupName differs");
  }, [props.groupName])
  useEffect(() => {
    console.log("Let's say,I do want to do some different task here only when companyName differs");
  }, [props.companyName])

  return <div> {props.groupName} - {props.companyName} </div>;
}

ReactDOM.render(<App />, document.getElementById("root"));

Le moyen le plus simple de créer des effets séparés lorsque des accessoires distincts changent est de créer plusieurs hooks useEffect qui ne sont exécutés que lorsque l'un des accessoires séparés change.

<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

<div id="root"></div>

const { useState, useEffect, useMemo } = React;

function App() {
  const [count, setCount] = useState(50);

  useEffect(() => {
    setTimeout(() => {
      setCount(150);
    }, 2000);
  }, []);

  return <DisplayCount count={count} />;
}

function DisplayCount(props) {
  const count = useMemo(() => props.count > 100 ? 100 : props.count, [props.count]);

  return <div> {count} </div>;
}

ReactDOM.render(<App />, document.getElementById("root"));

Je sais que votre exemple "d'état dérivé" est intentionnellement simple, mais comme il y a si peu de cas légitimes d'état dérivé, il est difficile de faire une recommandation sur le remplacement sauf au cas par cas car cela dépend de la raison pour laquelle vous utilisent l'état dérivé. Dans l'exemple particulier que vous avez fourni, il n'y avait aucune raison d'utiliser l'état dérivé dans le cas de classe et il n'y a donc toujours aucune raison dans le cas de crochet (la valeur peut simplement être dérivée localement sans la mettre à l'état). Si la valeur dérivée est chère, vous pouvez utiliser useMemo comme Tholle présente. Si ceux-ci ne correspondent pas aux cas les plus réalistes que vous avez en tête, vous devrez présenter un cas plus spécifique qui nécessite vraiment un état dérivé.

En ce qui concerne votre exemple componentDidUpdate , si ce que vous voulez faire pour les différents accessoires est indépendant, alors vous pouvez utiliser des effets séparés pour chacun (c'est-à-dire plusieurs appels useEffect ). Si vous voulez faire exactement ce qui est dans votre exemple (c'est-à-dire ne faire quelque chose pour un changement de companyName si groupName n'a pas également changé comme indiqué par votre else if ), alors vous pouvez utiliser des refs pour des conditions plus sophistiquées. Vous ne devez pas muter la référence pendant le rendu (il y a toujours la possibilité que le rendu soit supprimé / refait une fois que le mode concurrent est pris en charge), donc l'exemple utilise le dernier effet pour mettre à jour les références. Dans mon exemple, j'utilise une référence pour éviter de faire un travail d'effet sur le rendu initial (voir la réponse de Tholle dans cette question connexe ) et pour détecter si groupName changé ou non lors de la décision de travailler ou non en fonction d'un changement de companyName .

<div id="root"></div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

const { useState, useEffect, useRef } = React;

const DerivedStateFromProps = ({ count }) => {
  const derivedCount = count > 100 ? 100 : count;

  return (
    <div>
      Derived from {count}: {derivedCount}{" "}
    </div>
  );
};
const ComponentDidUpdate = ({ groupName, companyName }) => {
  const initialRender = useRef(true);
  const lastGroupName = useRef(groupName);
  useEffect(
    () => {
      if (!initialRender.current) {
        console.log("Do something when groupName changes", groupName);
      }
    },
    [groupName]
  );
  useEffect(
    () => {
      if (!initialRender.current) {
        console.log("Do something when companyName changes", companyName);
      }
    },
    [companyName]
  );
  useEffect(
    () => {
      if (!initialRender.current && groupName === lastGroupName.current)
        console.log(
          "Do something when companyName changes only if groupName didn't also change",
          companyName
        );
    },
    [companyName]
  );
  useEffect(
    () => {
      // This effect is last so that these refs can be read accurately in all the other effects.
      initialRender.current = false;
      lastGroupName.current = groupName;
    },
    [groupName]
  );

  return null;
};
function App() {
  const [count, setCount] = useState(98);
  const [groupName, setGroupName] = useState("initial groupName");
  const [companyName, setCompanyName] = useState("initial companyName");
  return (
    <div>
      <div>
        <DerivedStateFromProps count={count} />
        <button onClick={() => setCount(prevCount => prevCount + 1)}>
          Increment Count
        </button>
      </div>
      <div>
        <ComponentDidUpdate groupName={groupName} companyName={companyName} />
        groupName:{" "}
        <input
          type="text"
          value={groupName}
          onChange={event => setGroupName(event.target.value)}
        />
        <br />
        companyName:{" "}
        <input
          type="text"
          value={companyName}
          onChange={event => setCompanyName(event.target.value)}
        />
        <br />
        change both{" "}
        <input
          type="text"
          onChange={event => {
            const suffix = event.target.value;
            setGroupName(prev => prev + suffix);
            setCompanyName(prev => prev + suffix);
          }}
        />
      </div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Dans votre scénario, vous n'avez pas du tout besoin d'utiliser ou de getDerivedStateFromProps . Il vous suffit de créer une nouvelle variable pour obtenir la nouvelle forme de données. L'utilisation de l'état dans ce scénario provoquera simplement un autre re-rendu qui n'est pas de bonne qualité en termes de performances.

import React, { useState } from 'react';

const App = ({ count }) => {
  const [derivedCounter, setDerivedCounter] = useState(
    count > 100 ? 100 : count
  );

  useEffect(() => {
    setDerivedCounter(count > 100 ? 100 : count);
  }, [count]); // this line will tell react only trigger if count was changed

  return <div>Counter: {derivedCounter}</div>;
};

Démo ici: https://codesandbox.io/embed/qzn8y9y24j?fontsize=14

Vous pouvez en savoir plus sur les différentes façons de résoudre ce type de scénarios sans utiliser getDerivedStateFromProps ici: https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html

Si vous avez vraiment besoin d'utiliser un état séparé, vous pouvez utiliser quelque chose comme ça

import React from 'react';

const App = ({ count }) => {
  const derivedCount = count > 100 ? 100 : count;

  return (
    <div>Counter: {derivedCount}</div>
  );
}

App.propTypes = {
  count: PropTypes.number.isRequired
}

Le hook useEffect équivalent aux anciens props componentWillReceive peut être fait en utilisant le hook useEffect , en spécifiant simplement le prop que nous voulons écouter pour les changements dans le tableau de dépendances.

C'est à dire:

export default (props) => {

    useEffect( () => {
        console.log('counter updated');
    })

    return <div>Hi {props.counter}</div>
}

Pour componentDidUpdate simplement en omettant le tableau de dépendances, la fonction useEffect sera appelée après chaque nouveau rendu.

C'est à dire:

export default (props) => {

    useEffect( () => {
        console.log('counter updated');
    }, [props.counter])

    return <div>Hi {props.counter}</div>
}

setCount déclenchera un nouveau rendu. L'utilisation de useEffect avec [count] comme tableau de dépendances garantit que le hook n'appellera setCount lorsque la valeur de count change.

C'est ainsi que vous remplacez la logique componentWillReceiveProps que vous auriez autrement écrite dans l'ancien style React basé sur les classes. Je trouve utile le principe « Chaque rendu a ses propres accessoires et états »: si vous voulez déclencher un nouveau rendu uniquement lorsque des accessoires spécifiques changent, vous pouvez avoir plusieurs hooks useEffect .

useEffect(() => {
  count > 100 ? setCount(100) : setCount(count)
}, [count]) 
 
useEffect(() => {
  console.log('groupName has changed');
  // do something with groupName
}, [groupName])
    
useEffect(() => {
  console.log('companyName has changed');
  // do something with companyName
}, [companyName]) 

simplement en utilisant useEffect comme ceci.

useEffect( () => {
    props.actions.fetchSinglePost(props.match.params.id); //> I'm dispatching an action here.
}, [props.comments]) //> and here to watch comments and call the action in case there is any change.

1.) Quelle est l'implémentation équivalente avec React Hook, si j'ai besoin d'un état dérivé?

État dérivé pour Hooks = définir l'état sous condition et directement dans la phase de rendu:

React.useEffect(() => {
  return () => { };
}, [parentProp, secondProp]);

Cet état met à jour sans phase de validation supplémentaire par opposition à useEffect . Le modèle ci-dessus est pris en charge par le mode React Strict (pas d'avertissement):

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.development.js" integrity="sha256-4gJGEx/zXAxofkLPGXiU2IJHqSOmYV33Ru0zw0TeJ30=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.development.min.js" integrity="sha256-9xBa2Hcuh2S3iew36CzJawq7T9iviOAcAVz3bw8h3Lo=" crossorigin="anonymous"></script>
<div id="root"></div>

const App = () => {
  const [row, setRow] = React.useState(1);

  React.useEffect(() => {
    setTimeout(() => {
      setRow(2);
    }, 3000);
  }, []);

  return (
    <React.StrictMode>
      <Comp row={row} />
    </React.StrictMode>
  );
}

const Comp = ({ row }) => {
  const [isScrollingDown, setIsScrollingDown] = React.useState(false);
  const [prevRow, setPrevRow] = React.useState(null);

  console.log("render, prevRow:", prevRow)

  if (row !== prevRow) {
    console.log("derive state");
    // Row changed since last render. Update isScrollingDown.
    setIsScrollingDown(prevRow !== null && row > prevRow);
    setPrevRow(row);
  }

  return `Scrolling down: ${isScrollingDown}`;
};

ReactDOM.render(<App />, document.getElementById("root"));

Remarque 1 : componentWillReceiveProps est obsolète depuis un certain temps. getDerivedStateFromProps est le successeur des composants de classe en termes d'état dérivé.

Remarque 2 : vérifiez les solutions préférées avant de recourir à l'état dérivé.

---

2.) Que faire si je veux effectuer des tâches respectives en fonction de plusieurs changements d'accessoires respectifs?

Vous pouvez soit laisser useEffect deps complètement, soit ajouter de préférence un autre accessoire:

constComp = (props) => {
  const [derivedState, setDerivedState] = useState(42);
  if (someCondition) {
    setDerivedState(...);
  }
  // ...
}

Si vous utilisez le hook useMemo sur votre composant et que vous le faites dépendre de tous vos accessoires, il s'exécute avant que tout change à chaque fois que les accessoires changent. useEffect est déclenché après le rendu mis à jour et depuis dépendant de tous les accessoires, il se déclenche après un rendu en fonction de tous les accessoires.

const Component = (...props) => {
   // useState, useReducer if have
   useMemo(() => {
     // componentWillReceiveProps
   },[...props]);
   // ...other logic and stuff
   useEffect(() => {
     // componentDidUpdate
   }, [...props]);
};