当前位置:网站首页>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
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
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
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
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.
Site officiel:https://react.docschina.org/docs/hooks-effect.html
C'est aussi bien écrit :https://blog.csdn.net/aiwwy/article/details/123338490
边栏推荐
- Borg maze (bfs+ minimum spanning tree) (problem solving report)
- 栈的经典应用—括号匹配问题
- 969. Pancake sorting
- 快速转 TypeScript 指南
- Penetration test (4) -- detailed explanation of meterpreter command
- Socket communication
- TCP's three handshakes and four waves
- Educational Codeforces Round 130 (Rated for Div. 2)A~C
- QT按钮点击切换QLineEdit焦点(含代码)
- [analysis of teacher Gao's software needs] collection of exercises and answers for level 20 cloud class
猜你喜欢
Codeforces Round #797 (Div. 3)无F
Determine the Photo Position
快速转 TypeScript 指南
Analysis of protobuf format of real-time barrage and historical barrage at station B
树莓派4B64位系统安装miniconda(折腾了几天终于解决)
【练习-7】Crossword Answers
Flask框架配置loguru日志庫
1529. Minimum number of suffix flips
[exercise-7] crossover answers
2027. Minimum number of operations to convert strings
随机推荐
7-1 understand everything (20 points)
QT模拟鼠标事件,实现点击双击移动拖拽等
If you want to apply for a programmer, your resume should be written like this [essence summary]
Codeforces Round #800 (Div. 2)AC
Penetration test (4) -- detailed explanation of meterpreter command
Codeforces Round #803 (Div. 2)A~C
Information security - threat detection - Flink broadcast stream broadcaststate dual stream merging application in filtering security logs
New to redis
The concept of C language array
socket通讯
Some problems encountered in installing pytorch in windows11 CONDA
TCP's three handshakes and four waves
[exercise-7] crossover answers
QT有关QCobobox控件的样式设置(圆角、下拉框,向上展开、可编辑、内部布局等)
D - function (HDU - 6546) girls' competition
Penetration test (1) -- necessary tools, navigation
【练习-2】(Uva 712) S-Trees (S树)
(POJ - 3258) River hopper (two points)
The "sneaky" new asteroid will pass the earth safely this week: how to watch it
[exercise-7] (UVA 10976) fractions again?! (fraction split)