Une brève analyse de l'utilisation de la fonction useEffecfa dans React Hook

Cet article vous présentera la fonction useEffecfa dans React Hook et parlera des détails d'utilisation de la fonction useEffecfa. J'espère qu'il vous sera utile !

Analyse détaillée de useEffect

Utilisation de base de useEffecf

Suite de ce qui précède, dans l'article précédent nous avons expliqué State Hook, nous pouvons déjà le définir dans les composants fonctionnels grâce à cet état de hook . [Recommandations associées : Tutoriel vidéo Redis, Vidéo de programmation]

Nous savons qu'il peut y avoir des fonctions de cycle de vie dans les composants de classe, alors comment définir ces fonctions similaires aux cycles de vie dans les composants de fonction ?

Effect Hook vous permet d'effectuer certaines fonctions similaires au cycle de vie de la classe ;

En fait, les requêtes réseau, les mises à jour manuelles du DOM et certaines surveillances d'événements sont tous des effets secondaires de la mise à jour du DOM par React ;

Donc le Hook qui. remplit ces fonctions s'appelle Effect Hook ;

Si nous avons maintenant une exigence : le titre dans la page affiche toujours le nombre de compteur, utilisez les composants de classe et Hook pour implémenter respectivement :

Implémentation des composants de classe

import React, { PureComponent } from 'react'

export class App extends PureComponent {
  constructor() {
    super()

    this.state = {
      counter: 100
    }
  }

  // 进入页面时, 标题显示counter
  componentDidMount() {
    document.title = this.state.counter
  }

  // 数据发生变化时, 让标题一起变化
  componentDidUpdate() {
    document.title = this.state.counter
  }

  render() {
    const { counter } = this.state

    return (
      <div>
        <h2>{counter}</h2>
        <button onClick={() => this.setState({counter: counter+1})}>+1</button>
      </div>
    )
  }
}

export default App

Composant fonctionnel plus implémentation de Hook :

• Grâce au Hook useEffect, vous pouvez indiquer à React qu'il doit effectuer certaines opérations après le rendu
• useEffect nous oblige à transmettre une fonction de rappel à exécuter dans React après la mise à jour du DOM ; l'opération est terminée (c'est-à-dire après le rendu du composant), cette fonction sera rappelée ;
• Par défaut, que ce soit après le premier rendu ou après chaque mise à jour, Cette fonction de rappel sera exécuté ; généralement, nous écrivons des opérations d'effets secondaires dans cette fonction de rappel (默认情况下，无论是第一次渲染之后，还是每次更新之后，都会执行这个回调函数; 一般情况下我们在该回调函数中都是编写副作用的操作(例如网络请求, 操作DOM, 事件监听)

因此需要注意的是, 有许多说法说useEffect就是用来模拟生命周期的, 其实并不是; useEffect可以做到模拟生命周期, 但是他主要的作用是用来执行副作用的

import React, { memo, useEffect, useState } from 'react'

const App = memo(() => {
  const [counter, setCounter] = useState(200)

  // useEffect传入一个回调函数, 在页面渲染完成后自动执行
  useEffect(() => {
    // 一般在该回调函数在编写副作用的代码(网络请求, 操作DOM, 事件监听)
    document.title = counter
  })

  return (
    <div>
      <h2>{counter}</h2>
      <button onClick={() => setCounter(counter+1)}>+1</button>
    </div>
  )
})

export default App

---

清除副作用(Effect)

在class组件的编写过程中，某些副作用的代码，我们需要在componentWillUnmount中进行清除:

比如我们之前的事件总线或Redux中手动调用subscribe;

都需要在componentWillUnmount有对应的取消订阅;

Effect Hook通过什么方式来模拟componentWillUnmount呢?

useEffect传入的回调函数A本身可以有一个返回值，这个返回值是另外一个回调函数B:

type EffectCallback = () => (void | (() => void | undefined));

为什么要在 effect 中返回一个函数?

这是 effect 可选的清除机制。每个 effect 都可以返回一个清除函数;

如此可以将添加和移除订阅的逻辑放在一起;

它们都属于 effect 的一部分;

React 何时清除 effect?

React 会在组件更新和卸载的时候执行清除操作, 将上一次的监听取消掉, 只留下当前的监听 ;

正如之前学到的，effect 在每次渲染的时候都会执行;

import React, { memo, useEffect } from 'react'

const App = memo(() => {
  useEffect(() => {
    // 监听store数据发生改变
    const unsubscribe = store.subscribe(() => {

    })

    // 返回值是一个回调函数, 该回调函数在组件重新渲染或者要卸载时执行
    return () => {
      // 取消监听操作
      unsubscribe()
    }
  })

  return (
    <div>
      <h2>App</h2>
    </div>
  )
})

export default App

---

使用多个useEffect

使用Hook的其中一个目的就是解决class中生命周期经常将很多的逻辑放在一起的问题:

比如网络请求、事件监听、手动修改DOM，这些往往都会放在componentDidMount中;

一个函数组件中可以使用多个Effect Hook，我们可以将逻辑分离到不同的useEffect中:

import React, { memo, useEffect } from 'react'

const App = memo(() => {
  // 监听的useEffect
  useEffect(() => {
    console.log("监听的代码逻辑")

    return () => {
      console.log("取消的监听代码逻辑")
    }
  })

  // 发送网络请求的useEffect
  useEffect(() => {
    console.log("网络请求的代码逻辑")
  })

  // 操作DOM的useEffect
  useEffect(() => {
    console.log("操作DOM的代码逻辑")
  })

  return (
    <div>
      App
    </div>
  )
})

export default App

Hook允许我们按照代码的用途分离它们， 而不是像生命周期函数那样, 将很多逻辑放在一起:

React将按照 effect 声明的顺序依次调用telles que les requêtes réseau, le fonctionnement du DOM, la surveillance des événements

)

---

Il convient donc de noter qu'il existe de nombreux dictons On dit que useEffect est utilisé pour simuler le cycle de vie, mais en fait ce n'est pas le cas ; useEffect peut simuler le cycle de vie, mais sa fonction principale est d'effectuer des effets secondaires

import React, { memo, useEffect, useState } from 'react'

const App = memo(() => {
  const [counter, setCounter] = useState(100)
  
  // 发送网络请求的useEffect, 只有在counter发生改变时才会重新执行
  useEffect(() => {
    console.log("网络请求的代码逻辑")
  }, [counter])

  return (
    <div>
      <h2 onClick={() => setCounter(counter+1)}>{counter}</h2>
    </div>
  )
})

export default App

Clear Side effets (Effet)

Pendant le processus d'écriture des composants de classe, nous devons effacer certains codes d'effets secondaires dans composantWillUnmount :

Par exemple, notre bus d'événements précédent ou l'appel manuel de l'abonnement dans Redux ;

sont tous les deux là doit être un désabonnement correspondant dans composantWillUnmount ;

Comment Effect Hook simule-t-il composantWillUnmount ?

useEffect La fonction de rappel A elle-même peut avoir une valeur de retour, et cette valeur de retour est un autre . Fonction de rappel B

 :🎜🎜type EffectCallback = () => (void | (() => void | undefined));🎜🎜🎜Pourquoi vouloir renvoyer une fonction en vigueur ?🎜🎜🎜🎜Il s'agit du mécanisme de compensation facultatif de l'effet. Chaque effet peut renvoyer une fonction d'effacement ;🎜🎜De cette façon, la logique d'ajout et de suppression des abonnements peut être mise en place ;🎜🎜Ils font tous partie de l'effet ;🎜🎜🎜🎜Quand React est-il effacé ? effet ?🎜🎜🎜🎜React effectuera une opération de nettoyage lorsque le composant est mis à jour et désinstallé, annulant le dernier écouteur, ne laissant que l'écouteur actuel ;🎜🎜Comme nous l'avons appris précédemment, l'effet sera exécuté à chaque fois qu'il est rendu Exécution ;🎜 🎜

import React, { memo, useEffect, useState } from 'react'

const App = memo(() => {
  const [counter, setCounter] = useState(100)
  
  // 传入空数组表示不受任何数据依赖
  useEffect(() => {
    // 此时传入的参数一这个回调函数: 相当于componentDidMount
    console.log("监听的代码逻辑")

    // 参数一这个回调函数的返回值: 相当于componentWillUnmount
    return () => {
      console.log("取消的监听代码逻辑")
    }
  }, [])

  return (
    <div>
      <h2 onClick={() => setCounter(counter+1)}>{counter}</h2>
    </div>
  )
})

export default App

🎜🎜🎜🎜Utiliser plusieurs useEffect🎜🎜🎜🎜L'un des objectifs de l'utilisation de Hook est de résoudre le problème de la mise en place fréquente de beaucoup de logique dans le cycle de vie d'une classe🎜 : 🎜 🎜🎜Telles que les requêtes réseau, la surveillance des événements, la modification manuelle du DOM, celles-ci sont souvent placées dans le composantDidMount ;🎜🎜🎜🎜Des hooks d'effets multiples peuvent être utilisés dans un composant de fonction, et nous pouvons séparer la logique en différents useEffects🎜 :🎜 rrreee 🎜🎜Hook nous permet de séparer le code en fonction de son objectif, au lieu de rassembler beaucoup de logique comme les fonctions de cycle de vie🎜 :🎜🎜🎜React appellera dans le composant dans l'ordre selon le ordre de déclaration des effets Chaque effet ;🎜🎜🎜🎜🎜🎜🎜 optimisation des performances de useEffect🎜🎜🎜🎜Par défaut, la fonction de rappel de useEffect sera réexécutée à chaque fois qu'elle est rendue, mais cela posera deux problèmes🎜 :🎜🎜🎜Certains Nous souhaitons exécuter le code une seule fois (🎜Par exemple, une requête réseau peut être exécutée une fois lors du premier rendu du composant, il n'est pas nécessaire de l'exécuter plusieurs fois🎜), similaire à ce qui se fait dans composantDidMount et composantWillUnmount dans composants de classe ;🎜🎜De plus, plusieurs exécutions entraîneront également certains problèmes de performances 🎜🎜🎜🎜Comment décider quand useEffect doit être exécuté et quand il ne doit pas être exécuté 🎜🎜🎜🎜useEffect a en fait deux paramètres : 🎜

• 参数一: 执行的回调函数, 这个参数我们已经使用过了不再多说;
• 参数二: 是一个数组类型, 表示 该useEffect在哪些state发生变化时，才重新执行;(受谁的影响才会重新执行)

案例练习:

受count影响的Effect;

import React, { memo, useEffect, useState } from 'react'

const App = memo(() => {
  const [counter, setCounter] = useState(100)
  
  // 发送网络请求的useEffect, 只有在counter发生改变时才会重新执行
  useEffect(() => {
    console.log("网络请求的代码逻辑")
  }, [counter])

  return (
    <div>
      <h2 onClick={() => setCounter(counter+1)}>{counter}</h2>
    </div>
  )
})

export default App

但是，如果一个函数我们不希望依赖任何的内容时，也可以传入一个空的数组 []:

那么这里的两个回调函数分别对应的就是componentDidMount和componentWillUnmount生命周期函数了;

import React, { memo, useEffect, useState } from 'react'

const App = memo(() => {
  const [counter, setCounter] = useState(100)
  
  // 传入空数组表示不受任何数据依赖
  useEffect(() => {
    // 此时传入的参数一这个回调函数: 相当于componentDidMount
    console.log("监听的代码逻辑")

    // 参数一这个回调函数的返回值: 相当于componentWillUnmount
    return () => {
      console.log("取消的监听代码逻辑")
    }
  }, [])

  return (
    <div>
      <h2 onClick={() => setCounter(counter+1)}>{counter}</h2>
    </div>
  )
})

export default App

总结: useEffect可以模拟之前的class组件的生命周期(类似而不是相等), 并且它比原来的生命周期更加强大, 青出于蓝而胜于蓝

更多编程相关知识，请访问：编程教学！！

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!