学习react 笔记五（useEffect、useRef、useContext）

最新推荐文章于 2024-04-10 15:50:02 发布

奥特曼　

最新推荐文章于 2024-04-10 15:50:02 发布

阅读量1.8k

点赞数 3

分类专栏： react笔记 react 文章标签： react react.js javascript jsx 前端

本文链接：https://blog.csdn.net/m0_46846526/article/details/125666902

版权

react笔记同时被 2 个专栏收录

5 篇文章 1 订阅

订阅专栏

react

5 篇文章 0 订阅

订阅专栏

（5）demo 验证码倒计时抽离hooks

三、useContext（跨组件传值）

一、使用方法

二、传值Demo

一、useEffect副作用

副作用：平常把一些除了定义和 dom 一些无关的代码放到effect里，（例如请求ajax）

（1）使用useEffect

import {  useEffect } from 'react'
 useEffect(() => {
    console.log('useEffect1')
  })

（2）执行时机（第二个参数）

情况一：不写第二个参数，页面创建和数据更新会执行

 useEffect(() => {
    console.log('useEffect1')
  })

情况二：第二个参数是空数组执行时机：只有在组件创建时会执行一次

 useEffect(() => {
    console.log('useEffect2')
  }, [])

情况三：第二个参数依赖项执行时机：页面创建和依赖数据更新了会执行注意写法是 [ 变量 ]

 useEffect(() => {
    console.log('useEffect3')
  }, [a])

（3）倒计时demo

import React, { useState, useEffect } from 'react'
import ReactDOM from 'react-dom/client'

const Ren = function () {

  const [a, setA] = useState(100)

  useEffect(() => {
    setInterval(() => {
      console.log('倒计时', a)
      setA(e => e - 1)
    }, 1000)
  }, [])


  return <div>倒计时100个数 {a} </div >
}

（4）请求ajax

import React, { useEffect, useState } from 'react'
import ReactDOM from 'react-dom/client'
import axios from 'axios'
const Ren = function () {

  useEffect(() => {
    axios({
      method: 'GET',
      url: 'https://www.xxx.cn/api/cart',
      data: {}
    }).then(res => {
      console.log(res)
    })
  })
  return <div></div>
}

写成 async await形式

错误写法：

  useEffect(async () => {
    await axios({
      method: 'GET',
      url: 'https://www.xxx.cn/api/cart',
      data: {}
    }).then(res => {
      console.log(res)
    })
  })

正确写法：

  useEffect(() => {
    const getList = async () => {
      const res = await axios({
        method: 'GET',
        url: 'https://www.xxx.cn/api/cart',
        data: {}
      })
      console.log(res)
    }
    getList()
  })

async 后面要跟一个promise 而useEffect并不是所以我们可以在useEffect里定义一个函数直接调用

（5）useEffect的清理函数

副作用函数的返回值是可选的，也可以省略，也可以返回一个清理函数清理副作用

执行时机：清理函数会在组件卸载时以及下次副作用函数调用之前执行

useEffect(() => {
    return () =>  // 做清理工作
  })

demo 清除鼠标移动事件

import React, { useEffect, useState } from 'react'
// import ReactDOM from 'react-dom/client'
import ReactDOM from 'react-dom'
const Ren = function () {
  useEffect(() => {
    const f = (e) => {
      console.log(e.screenX, e.screenY)
    }
    window.addEventListener('mousemove', f)
    return () => {
      window.removeEventListener('mousemove', f)
    }
  })
  return <h1>111</h1>
}

export default function Use () {
  const [isShow, toggle] = useState(true)
  const hide = () => {
    toggle(false)
  }
  return (
    <div>
      {isShow && <Ren></Ren>}
      <div onClick={hide}>切换</div>

    </div>
  )
}

// const root = ReactDOM.createRoot(document.getElementById('root'))
// root.render(<Use />)

ReactDOM.render(<Use></Use>, document.getElementById('root'))

在上面代码中在组件里绑定了鼠标事件当销毁组件时事件并不会被销毁这时候可以利用useEffect清理函数来清除掉鼠标移动事件

（6）图片移动demo

import React, { useEffect, useState } from 'react'
// import ReactDOM from 'react-dom/client'
import ReactDOM from 'react-dom'
import img from '../images/avatar.png'

const Ren = function () {
  const [X, setX] = useState(0)
  const [Y, setY] = useState(0)

  useEffect(() => {
    const f = (e) => {
      console.log(e.screenX, e.screenY)
      setX(() => e.screenX)
      setY(() => e.screenY)
    }
    window.addEventListener('mousemove', f)
    return () => {
      window.removeEventListener('mousemove', f)
    }
  })
  return (
    <div style={{ width: "50px", height: "50px" }}>
      <img src={img} style={{ width: "50px", height: "50px", position: "absolute", left: X + 'px', top: Y + 'px' }}></img>
    </div>
  )
}

// const root = ReactDOM.createRoot(document.getElementById('root'))
// root.render(<Use />)

ReactDOM.render(<Ren></Ren>, document.getElementById('root'))

（7）图片移动demo 封装

mouseMoveXY.js

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

// 如果是函数组件首字母要大写 如果是hooks函数 要以use开头 
// 调用要在 函数组件里面调用 
export default function useMouseMove () {
  const [X, setX] = useState(0)
  const [Y, setY] = useState(0)

  useEffect(() => {
    const f = (e) => {
      console.log(e.screenX, e.screenY)
      setX(() => e.screenX)
      setY(() => e.screenY)
    }
    window.addEventListener('mousemove', f)
    return () => {
      window.removeEventListener('mousemove', f)
    }
  })
  return { X, Y }
}

使用

import React, { useEffect, useState } from 'react'
// import ReactDOM from 'react-dom/client'
import ReactDOM from 'react-dom'
import img from '../images/avatar.png'
import mousemove from './mouseMoveXY'
const Ren = function () {
  const { X, Y } = mousemove()
  return (
    <div style={{ width: "50px", height: "50px" }}>
      <img src={img} style={{ width: "50px", height: "50px", position: "absolute", left: X + 'px', top: Y + 'px' }}></img>
    </div>
  )
}

ReactDOM.render(<Ren></Ren>, document.getElementById('root'))

二、 useRef（引用）

（1）使用方法

1.导入 import React, { useRef } from 'react'

2.定义 const getInput = useRef(null)

3.使用 ref={getInput}

（2）demo 获取input的值

import React, { useRef, useState } from 'react'
// import ReactDOM from 'react-dom/client'
import ReactDOM from 'react-dom'
const Ren = function () {
  const getInput = useRef(null)
  console.log(getInput)
  const [text, SetText] = useState('')
  const edit = (e) => {
    console.log(e.target.value)
    SetText(() => e.target.value)
  }
  const getText = () => {
    console.log(getInput.current.value)
  }
  return (
    <div>
      <input value={text} onChange={edit} ref={getInput}></input>
      <button onClick={getText}>获取input的值</button>
    </div>
  )
}


ReactDOM.render(<Ren></Ren>, document.getElementById('root'))

（3）demo 清除定时器

import React, { useEffect, useRef, useState } from 'react'
// import ReactDOM from 'react-dom/client'
import ReactDOM from 'react-dom'
const Ren = function () {
  const getInput = useRef(null)
  console.log(getInput)
  const timer = useRef(null)
  const [Num, setNum] = useState(0)
  // let timer = null  //相当于每次都是在赋值一个null 错误写法
  useEffect(() => {
    // timer = setInterval(() => {
    timer.current = setInterval(() => {
      setNum(() => Num + 1)
    }, 1000)
  }, [])
  const edit = (e) => {

  }
  const clearTimer = () => {
    // clearInterval(timer)
    clearInterval(timer.current)
  }
  return (
    <div>
      <div>倒计时 {Num} </div>
      <button onClick={clearTimer}>清除定时器</button>
    </div>
  )
}


ReactDOM.render(<Ren></Ren>, document.getElementById('root'))

如果在外层定义一个timer 定义定时器当每次倒计时值发生改变时整个组件都会重新执行相当于每次倒计时都在定义了一个timer 如果想清除定时器可以用useRef 把定义的变量使用变量.current 来当成定时器的变量可以理解为 useRef 定义的 current里永远都是引用类型不会改变

（4）demo 验证码倒计时

import React, { useEffect, useRef, useState } from 'react'
// import ReactDOM from 'react-dom/client'
import ReactDOM from 'react-dom'

const Ren = function () {
  const timer = useRef(null)
  const [Num, setNum] = useState(3)
  const [Status, setStatus] = useState(false)

  const countDown = () => {
    timer.current = setInterval(() => {
      setNum((Num) => {
        setStatus(true)
        return Num - 1
      })
    }, 1000)
  }

  useEffect(() => {
    if (Num == 0) {
      clearInterval(timer.current)
      setStatus(false)
      setNum(3)
    }
    console.log(Num)
  }, [Num])
  return (
    <div>
      <div>倒计时 {Num} </div>
      <button disabled={Status} onClick={countDown}>{Status ? Num + '秒后重新获取' : '获取验证码'}</button>
    </div>
  )
}


ReactDOM.render(<Ren></Ren>, document.getElementById('root'))

（5）demo 验证码倒计时抽离hooks

import React, { useEffect, useRef, useState } from 'react'
// import ReactDOM from 'react-dom/client'
import ReactDOM from 'react-dom'
const useCount = (count = 10, callback = () => { }) => {
  const timer = useRef(null)
  const [Num, setNum] = useState(null)

  const start = () => {
    setNum(count)
    timer.current = setInterval(() => {
      setNum(num => num - 1)
    }, 1000)
  }

  useEffect(() => {
    if (Num == 0) {
      clearInterval(timer.current)
      callback()
    }
  }, [Num])


  return { start, Num }
}

const Ren = function () {

  const [Status, setStatus] = useState(false)
  const { start, Num } = useCount(3, () => {
    setStatus(false)
  })
  const countDown = () => {
    setStatus(true)
    start()
  }

  return (
    <div>
      <div>倒计时 {Num} </div>
      <button disabled={Status} onClick={countDown}>获取验证码</button>
    </div>
  )
}


ReactDOM.render(<Ren></Ren>, document.getElementById('root'))

count 作为倒计时秒数、callback作为倒计时之后的回调函数

demo 验证码倒计时封装抽离出一个组件 useCountDown.js

import { useEffect, useRef, useState } from 'react'
export default function useCountDown (count = 10, callback = () => { }) {
  const timer = useRef(null)
  const [Num, setNum] = useState(null)

  const start = () => {
    setNum(count)
    timer.current = setInterval(() => {
      //组件清楚后仍会执行
      console.log(1)
      setNum(num => num - 1)
    }, 1000)
  }

  useEffect(() => {
    if (Num == 0) {
      setNum(count)
      clearInterval(timer.current)
      callback()
    }
  }, [Num])

  useEffect(() => {
    return () => {
      clearInterval(timer.current)
    }
  }, [])


  return { start, Num }
}

记得通过useEffect的清理函数清理一下定时器事件极端情况下销毁组件后延时器仍会执行

使用

import React, { useState } from 'react'
import ReactDOM from 'react-dom'

import useCountDown from './useCountDown'

const Ren = function () {

  const [Status, setStatus] = useState(false)
  const { start, Num } = useCountDown(3, () => {
    setStatus(false)
  })

  const countDown = () => {
    setStatus(true)
    start()
  }

  return (
    <div>
      <div>倒计时 {Num} </div>
      <button disabled={Status} onClick={countDown}>获取验证码</button>
    </div>
  )
}

ReactDOM.render(<Ren></Ren>, document.getElementById('root'))

三、useContext（跨组件传值）

一、使用方法

1.导如并调用createContext 得到 Context对象导出

import React, { useState, createContext } from 'react'
export const Context = createContext()

2.使用Provider包裹根组件通过value属性提供共享数据

 return (
    <Context.Provider value={{ a: 1, b: 2 }}>
      <根组件内容/>
    </Context.Provider>
  )

3. 子代组件接收

import { useContext } from 'react'
 const value = useContext(Context)
 console.log(value)

二、传值Demo

index.js 根组件

import React, {  createContext } from 'react'
import ReactDOM from 'react-dom'


import Father from './father'
export const Context = createContext()
const Ren = function () {

  return (
    <Context.Provider value={{ a: 1, b: 2 }}>
      <div>
        <div>根组件</div>
        <div style={{ border: '1px solid #ccc' }}> <Father /></div>
      </div>
    </Context.Provider>
  )
}


ReactDOM.render(<Ren></Ren>, document.getElementById('root'))

father.js 父组件

import Son from './son.js'
function Father () {

  return (
    <div>
      <div>父组件</div>
      <div style={{ border: '1px solid #ccc' }}> <Son /></div>
    </div>
  )
}

export default Father

son.js 子组件

import { Context } from './index'
import { useContext } from 'react'
function Son1 () {
  const value = useContext(Context)
  return (
    <div>
      <div> 孙子组件: {value.a} {value.b} </div>
    </div>
  )
}

export default Son1

奥特曼　

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
学习react 笔记五（useEffect、useRef、useContext）

目录一、useEffect副作用（1）使用useEffect（2）执行时机（第二个参数）（3）倒计时demo（4）请求ajax（5）useEffect的清理函数（6）图片移动demo（7）图片移动demo 封装二、 useRef（引用）（1）使用方法（2）demo 获取input的值（3）demo 清除定时器（4）demo 验证码倒计时（5）demo 验证码倒计时抽离hooks三、useContext（跨组件传值）一、使用方法二、传值Demo（2）执行时机（第二个参数）情况一：不写第二个参数
复制链接

扫一扫