[email protected]/umd/react do...">

当前位置：网站首页>Effet d'utilisation, déclenché lorsque les composants de la fonction sont montés et déchargés

Effet d'utilisation, déclenché lorsque les composants de la fonction sont montés et déchargés

2022-07-06 16:13:00 【Hauteur de rêve 1M8】

1 Sans paramètres

Après le premier rendu et après chaque mise à jour

<html>

<head>
    <script src="https://unpkg.com/[email protected]/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>
</body>
<script type="text/babel"> const e = React.createElement; const custom = () => {
       const [number, setNumber] = React.useState(0); React.useEffect(() => {
       console.log('DéclencheuruseEffect' + number); }); return <button onClick={
      () => setNumber(number + 1)}>Cliquez sur{
      number}</button> } const domContainer = document.querySelector('#root'); ReactDOM.render(e(custom), domContainer); </script>

</html>

Chaque mise à jour,DéclencheuseEffect
Insérer la description de l'image ici

2 Avec paramètres

Peut passer plusieurs[param1,param2,param3....]
Exécuter lorsque les paramètres spécifiés changent 

<html>

<head>
    <script src="https://unpkg.com/[email protected]/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>
</body>
<script type="text/babel"> const e = React.createElement; const custom = () => {
       const [number, setNumber] = React.useState(0); const [change, setChange] = React.useState(0); React.useEffect(() => {
       console.log('DéclencheuruseEffect' + number); }, [change]); return [<button onClick={
      () => setNumber(number + 1)}>number{
      number}</button>, <button onClick={
      () => setChange(change + 1)}>change{
      change}</button>] } const domContainer = document.querySelector('#root'); ReactDOM.render(e(custom), domContainer); </script>

</html>

SeulementchangeMise à jour,Pour déclencheruseEffect
Insérer la description de l'image ici

3 Tableau vide entrant

Une seule fois effect（Effectuer uniquement lorsque les composants sont montés et déchargés）

<html>

<head>
    <script src="https://unpkg.com/[email protected]/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>
</body>
<script type="text/babel"> const e = React.createElement; const custom = () => {
       const [number, setNumber] = React.useState(0); React.useEffect(() => {
       console.log('DéclencheuruseEffect' + number); setNumber(5) }, []); return <button onClick={
      () => setNumber(number + 1)}>Cliquez sur{
      number}</button> } const domContainer = document.querySelector('#root'); ReactDOM.render(e(custom), domContainer); </script>

</html>

（ Le début a été rafraîchi ）Lors du montageuseEffectPrends ça.numberSet to5, Les mises à jour ultérieures ne sont pas déclenchées useEffect
Insérer la description de l'image ici

4 effectRenvoie la fonction

Exécuter la fonction de retour lors de la désinstallation
Par exemple avec un minuteur , C'est le cas sans fonction de retour 

<html>

<head>
    <script src="https://unpkg.com/[email protected]/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>
</body>
<script type="text/babel"> const e = React.createElement; const Custom = () => {
       const [number, setNumber] = React.useState(0); React.useEffect(() => {
       console.log('DéclencheuruseEffect' + number) let interval = null; let t = 0 interval = setInterval(() => {
       console.log('Minuterie', t); setNumber(++t) }, 1000); }, []); return <div>Minuterie{
      number}</div> } const customSwitch = () => {
       const [on, setOn] = React.useState(false); return [<button onClick={
      () => setOn(!on)}>{
      on ? 'Fermer' : 'Ouvert'}</button>, on && <Custom />] } const domContainer = document.querySelector('#root'); ReactDOM.render(e(customSwitch), domContainer); </script>

</html>

customLors du déchargement des composants, Le minuteur n'a pas été annulé , Après le rechargement , Avec deux minuteurs
Insérer la description de l'image ici
Annuler le minuteur dans la fonction de retour 

<html>

<head>
    <script src="https://unpkg.com/[email protected]/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>
</body>
<script type="text/babel"> const e = React.createElement; let interval = null; const Custom = () => {
       const [number, setNumber] = React.useState(0); React.useEffect(() => {
       console.log('DéclencheuruseEffect' + number) let t = 0 interval = setInterval(() => {
       console.log('Minuterie', t); setNumber(++t) }, 1000); return ()=> {
       console.log(' Déclenché lors du déchargement effect') clearInterval(interval) } }, []); return <div>Minuterie{
      number}</div> } const customSwitch = () => {
       const [on, setOn] = React.useState(false); return [<button onClick={
      () => setOn(!on)}>{
      on ? 'Fermer' : 'Ouvert'}</button>, on && <Custom />] } const domContainer = document.querySelector('#root'); ReactDOM.render(e(customSwitch), domContainer); </script>

</html>

DésinstallercustomQuand,Annuler le minuteur, Quand il est monté à nouveau ,Allumez le minuteur.
Insérer la description de l'image ici

Site officiel：https://react.docschina.org/docs/hooks-effect.html
C'est aussi bien écrit ：https://blog.csdn.net/aiwwy/article/details/123338490

原网站

版权声明
本文为[Hauteur de rêve 1M8]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/187/202207060920187256.html

边栏推荐

猜你喜欢

随机推荐