react之Hook的useEffect详解

Posted 2023-03-14

参考技术A // useEffect第一个参数是相当于执行了钩子函数的componentdidmount和componentdidupDate

// 第二个参数是是个数组，只有当数组中的每一项都没有发生变化才不会useEffect才不会执行

// 不传数组就是每一次都执行useEffect

// 传空数组，空数组跟空数组是相同的，所以useEffect只会执行一次

 const onClick = () => 

    console.log('click')

  //监听事件

  useEffect( () => 

      console.log('监听')

      document.querySelector('#size').addEventListener('click',onClick,false)

  ,[])  //如果只需要执行一次，那么可以这样来写

  useEffect( () => 

      console.log('监听')

      document.querySelector('#size').addEventListener('click',onClick,false)

       return () => 

         console.log('销毁')

       document.querySelector('#size').removeEventListener('click',onClick,false)

       

  )//这样就会反复创建销毁！！

hook函数之useEffect的使用——自定义hook函数网络请求——

hook函数之useEffect的使用

---

此hook可以模拟函数组件的生命周期，函数组件对于在一些生命周期中操作还是无能为力，所以 React提供了 useEffect 来帮助开发者处理函数组件，来帮助模拟完成一部份的开发中非常常用的生命周期方法。常被别的称为：副作用处理函数。此函数的操作是异步的。

• 注：useEffect中不能有返回值，React它要自动回收

---

模拟的生命周期就有三个：

useEffect副作用函数  它可以让函数组件中模拟生命周期
生命周期 componentDidMount componentDidUpdate componentWillUnmout

原理：

[]记录下来
[] => []  所有值比对，如果值没有变化则不执行，有变化执行
arguments.length
deparr undefined 没有第2个

模拟 componentDidMount ， componentWillUnmout

useEffect(()=>
    console.log("App");
)

模拟挂载 componentDidMount

参数2：依赖项，如果为空数组，则只执行1次
一般在这样的写法中，完成网络请求

useEffect(()=>
    console.log("App");
,[])

模拟更新 componentDidUpdate

只针对某个数据count的值来做更新周期的检测
useEffect(()=>
    console.log("App");
,[count])

模拟卸载 componentWillUnmout

有依赖项，数据更新就卸载原来的，重新渲染页面

useEffect(()=>
    console.log("App");
,[count])

const Child = () => 
    useEffect(() => 
        return () => 
            console.log("child_____componentWillUnmout");
        
    , [])
    return (
        <div>
            <h2>Child</h2>
        </div>
    )

useEffect 网络请求

• 在之前的版本:第1个参数要求只能是一个普通的函数，没有返回对象，可以返回回调函数，回调函数它模拟生命周期componentWillUnmout
• 在代码中，我们使用async / await从第三方API获取数据。如果你对async/await熟悉的话，你会知道，每个async函数都会默认返回一个隐式的promise。但是，useEffect不应该返回任何内容。这就是为什么会在控制台日志中看到以下警告：
• Warning: useEffect function must return a cleanup function or nothing. Promises and useEffect(async () => …) are not supported, but you can call an async function inside an effect

最新的写法

useEffect(async () => 
   let ret = await get('/api/swiper')
   setFilms(ret.data)
 , [])

版本普世的写法，利用一个自执行的函数；
如果useEffect顶层不支持 async/await可以使用如下的解决方案

    useEffect(()=>
        (async function()
            let ret = await get("/api/swiper");
            setFime(ret.data)
            console.log(ret.data);
        )()
    ,[])

自定义hook函数网络请求

import  get  from '@/utils/http';
import  useState, useEffect  from 'react';

const useSwiper = (initState = [])=>
    let [fime,setFime] = useState(initState);

    useEffect(()=>
        (async function()
            let ret = await get("/api/swiper");
            setFime(ret.data)
        )()
    ,[])

    return fime


export default useSwiper;

把函数也传出去，完成对useEffect的操作

使用闭包的原理，操作了原来函数中的数据

import  get  from '@/utils/http';
import  useState, useEffect  from 'react';

const useGoodFood = (initState = [])=>
    let [data,setData] = useState(initState);
    let [page,setPage] = useState(1);

    const loadData = async ()=>
        let ret =await get("/api/goodfood?page="+page);
        if(ret.data.length>0)
            // setData(ret.data)
            setData(v=>[...v,...ret.data])
            setPage(v=>v+1)
        
    
    useEffect(()=>
        loadData()
    ,[])

    return [data,loadData]


export default useGoodFood;

import useForm from "@/hook/useGoodFood.js"
const App = () => 
    let [fime,loadData] = useForm()
    console.log(fime);
    return (
        <div>
            <ul>
                fime.map((name,id)=><li key=id>name</li>)
            </ul>
            <button onClick=()=>loadData(2)>下一页</button>
        </div>
    );