C/C++教程

useEffect

本文主要是介绍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;

 

这篇关于useEffect的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!