React基础之useEffect
React基础之useEffect
概念
useEffect是一个React Hook函数，用在React组件中创建不是由事件引起的而是由渲染本身引起的操作，比如发送Ajax，更改Dom等
import
React
, {
useState
}
from
‘react’
;
import
{
useEffect
}
from
‘react’
;
const
URL
=
‘
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 ()
},[])
const
msg
=
’this is app msg’
return
(
<
div
this is app
<
ul
{
list
.
map
(
item
=>
<
li
key
=
{
item
.
id
}
{
item
.
name
}
</
li
)
}
</
ul
</
div
);
}
export default
App
;
useEffect依赖项参数说明
useEffect副作用函数的执行时机存在多种情况，根据传入的依赖项的不同，会有不同的执行表现
清除useEffect副作用
在useEffect中编写的由渲染本身引起的对接组件外部的操作，社区中也将称为副作用
如我们在useEffect中开启了一个定时器，我们想在组件卸载的时候，将这个定时器清理掉，这个过程就成为清理副作用
清除副作用的函数最常见的执行时机就是在组件卸载时自动执行
import
React
, {
useState
}
from
‘react’
;
import
{
useEffect
}
from
‘react’
;
function
Son
(){
//
渲染完毕之后开启一个定时器
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
)}
}
卸载子组件
</
button
</
div
);
}
export default
App
;
封装自定义hook
1.在hook文件夹中创建一个use打头的函数
2.在这个函数中封装逻辑并导出
3.需要使用的地方进行导入即可
实例代码
//封装获取频道列表的逻辑
import
{
useEffect
,
useState
}
from
“react”
import
{
getChannelAPI
}
from
‘@/api/article’
;
function
useChannel
() {
const
[
channelList
,
setChannelList
] =
useState
([])
useEffect
(()
=>
{
//1.
封装函数，在函数体中调用接口
const
getChannelList
=
async
()
=>
{
const
res
=
await
getChannelAPI
()
setChannelList
(
res
.
data
.
channels
)
}
getChannelList
()
}, [])
return
{
channelList
}
}
export
{
useChannel
}
d
分页实现逻辑思路
1.计算总页数（页数=总数/每页条数）
2.点击分页拿到当前点击页数
3.使用页数作为请求参数重新获取文章列表渲染
注意，我们删除之后需要重新渲染数据，此时可以通过触发useState的方法来实现数据的更新
表单回填
1.创建一个form来获取实例
//
获取实例
const
[
form
]=
Form
.
useForm
()
2.给表单绑定对应的form属性
<
Form
labelCol
=
{
{
span:
4
}
}
wrapperCol
=
{
{
span:
16
}
}
initialValues
=
{
{
type:
0
}
}
onFinish
=
{
onFinish
}
//
添加
onFinish
处理函数
form = { form }
3.调用setFieldsValue回填函数
useEffect
(()
=>
{
//1.
通过
id
获取数据
async function
getArticleDetail
(){
const
res
=
await
getArticleById
(
articleId
)
console
.
log
(
res
.
data
);
form . setFieldsValue ( res . data )
}
getArticleDetail
()
//2.
蒋数据回填
},[
articleId
,
form
])
time set night