useEffect

2022-02-16 21:03:22 阅读：170 来源： 互联网

标签：return 函数里面 useState import useEffect

在函数式组件里面使用useEffect（）可以实现在类式组件里面的生命周期的效果

使用：

useEffect(()=>{},[])第一个参数是一个回调函数，在里面编写要进行的操作，第二个参数是依赖，如果数组为空，说明不依赖于任何的状态，回调函数里面的操作只会在初始化时执行一次，后续状态更新不会执行里面的操作，相当于类式组件里面的componentDidMount()

如果数组里面写了依赖，那么当所依赖的状态发生变化时，会再次执行回调函数里面的操作，相当于类式组件里面的componentDidUpdate()

在回调函数的最后，可以返回一个函数，这个函数会在组件销毁的时候被执行

Demo.js

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

export default function Demo() {
    const [time, settime] = useState(Date())
    const [color, setcolor] = useState('yellow')
    const m = useRef()
    useEffect(() => {
        let timmer = setInterval(() => {
            console.log(Date())
            settime(Date())
            setcolor(m.current.value)
        }, 1000)
        console.log('时间更新了')
        return () => {
            clearInterval(timmer)
        }
    }, [])
    useEffect(() => {
        let timmer = setTimeout(() => {
            console.log('哈哈哈哈')
            setcolor(m.current.value)
        }, 5000)
        return () => {
            clearTimeout(timmer)
        }
    }, [])
    return (
        <div>
            <span>{time}</span>
            <input ref={m} type='text' />
            <button>换色</button>
            <div style={{ background: `${color}`, width: '100px', height: '100px' }} >11</div>
        </div>
    )
}

App.js

import logo from './logo.svg';
import { useState } from 'react';
import './App.css';
import Demo from './hooks/02-useEffect'

function App() {
  const [flag, setflag] = useState(true)
  return (
    <div className="App">
      {flag && <Demo />}
      <button onClick={() => {
        setflag((flag) => !flag)
      }}>切换</button>
    </div>
  );
}

export default App;

标签：return,函数,里面,useState,import,useEffect
来源： https://www.cnblogs.com/oumannrinn/p/15902271.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

useEffect

Demo.js

App.js