React基础之useEffect
概念
useEffect是一个React Hook函数，用在React组件中创建不是由事件引起的而是由渲染本身引起的操作，比如发送Ajax，更改Dom等
import React, { useState } from 'react';
import { useEffect } 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()
},[])
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