(创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹)
目录
useEffect 的使用
useEffect 的概念理解
useEffect 依赖项参数说明
useEffect — 清除副作用
自定义Hook实现
React Hooks使用规则
useEffect 的使用
useEffect 的概念理解
useEffect是一个React Hook函数,用于在React组件中 创建不是由事件引起而是 由渲染本身引起的操作(副作用), 比如发送AJAX请求,更改DOM等等说明:上面的组件中没有发生任何的用户事件, 组件渲染完毕之后 就需要和服务器要数据,整个过程属于 “只由渲染引起的操作”
import { useEffect, useState } from "react"
const URL = 'http://geek.itheima.net/v1_0/channels'
function App () {
// 创建一个状态数据
const [list, setList] = useState([])
useEffect(() => {
// 额外的操作 获取频道列表
async function getList () {
const res = await fetch(URL)
const jsonRes = await res.json()
console.log(jsonRes)
setList(jsonRes.data.channels)
}
getList()
}, [])
return (
<div>
this is app
<ul>
{list.map(item => <li key={item.id}>{item.name}</li>)}
</ul>
</div>
)
}
export default App
useEffect 依赖项参数说明
useEffect副作用函数的执行时机存在多种情况,根据 传入依赖项的不同 ,会有不同的执行表现
import { useEffect, useState } from "react"
function App () {
// 1. 没有依赖项 初始 + 组件更新
const [count, setCount] = useState(0)
// useEffect(() => {
// console.log('副作用函数执行了')
// })
// 2. 传入空数组依赖 初始执行一次
// useEffect(() => {
// console.log('副作用函数执行了')
// }, [])
// 3. 传入特定依赖项 初始 + 依赖项变化时执行
useEffect(() => {
console.log('副作用函数执行了')
}, [count])
return (
<div>
this is app
<button onClick={() => setCount(count + 1)}>+{count}</button>
</div>
)
}
export default App
useEffect — 清除副作用
在useEffect 中编写的 由渲染本身引起的对接组件外部的操作, 社区也经常把它叫做 副作用操作 ,比如在useEffect中开启了一个定时器,我们想在组件卸载时把这个定时器再清理掉,这个过程就是清理副作用说明:清除副作用的函数 最常见 的执行时机是在 组件卸载时自动执行需求:在Son组件渲染时开启一个定制器,卸载时清除这个定时器
import { useEffect, useState } from "react"
function Son () {
// 1. 渲染时开启一个定时器
useEffect(() => {
const timer = setInterval(() => {
console.log('定时器执行中...')
}, 1000)
return () => {
// 清除副作用(组件卸载时)
clearInterval(timer)
}
}, [])
return <div>this is son</div>
}
function App () {
// 通过条件渲染模拟组件卸载
const [show, setShow] = useState(true)
return (
<div>
{show && <Son />}
<button onClick={() => setShow(false)}>卸载Son组件</button>
</div>
)
}
export default App
自定义Hook实现
概念:自定义Hook是以 use 打头的函数,通过自定义Hook函数可以用来实现逻辑的封装和复用
例如:如下图所示,通过点击toggle按钮,实现this is div的显示与隐藏文章来源:https://www.toymoban.com/news/detail-813459.html
文章来源地址https://www.toymoban.com/news/detail-813459.html
// 封装自定义Hook
// 问题: 布尔切换的逻辑 当前组件耦合在一起的 不方便复用
// 解决思路: 自定义hook
import { useState } from "react"
function useToggle () {
// 可复用的逻辑代码
const [value, setValue] = useState(true)
const toggle = () => setValue(!value)
// 哪些状态和回调函数需要在其他组件中使用 return
return {
value,
toggle
}
}
// 封装自定义hook通用思路
// 1. 声明一个以use打头的函数
// 2. 在函数体内封装可复用的逻辑(只要是可复用的逻辑)
// 3. 把组件中用到的状态或者回调return出去(以对象或者数组)
// 4. 在哪个组件中要用到这个逻辑,就执行这个函数,解构出来状态和回调进行使用
function App () {
const { value, toggle } = useToggle()
return (
<div>
{value && <div>this is div</div>}
<button onClick={toggle}>toggle</button>
</div>
)
}
export default App
React Hooks使用规则
使用规则1. 只能在组件中或者其他自定义Hook函数中调用2. 只能在组件的顶层调用 ,不能嵌套在 if、for、其他函数中
到了这里,关于前端react入门day04-useEffect与Hook函数的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!