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 !
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
在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
使用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
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)
sont tous les deux là doit être un désabonnement correspondant dans composantWillUnmount ;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 ;
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 ;🎜 🎜🎜🎜🎜🎜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🎜 :🎜🎜🎜Reactimport 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 AppCopier après la connexionCopier après la connexionappellera
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!