• react hooks 之 useState,useEffect


    1 react hooks 增强原函数学法的功能,赋予了其可以更新自身内部状态的api,在大部分情况下能够完美的替换类的写法,使得代码更具有可能性,更加优美
    2 虽然如此,尽管觉得自己理解的很透彻的情况下,也不要随意去重构自己的代码,可以在新的业务逻辑中尝试使用她,你会发现hooks不能完全代替类的写法,因此尽量给自己少挖点坑。

    
    
    3  useState 写法如下

    const pageA = (props) => { const [value, setValue] = useState(0) return <>{value}</> } // 其类似类函数的state初始复制,这里不多赘述
    setValue(pre => {
    return {} // 此类写法可以获取上一次的value值
    })

    //当你要更新的value的时候,直接调用setValue函数即可,此时pageA会重新渲染 注意setValue调用是完全覆盖原有的value,这一点与setState有所区别
    4 useEffect 的作用 与写法
    
    const PageA = () => {
    
     useEffcet(() => {
        // getDate() 这里可以执行获取数据的请求函数
       return () => {}
    }, [])
      return <>1</>
    }
    
    //这是相当于类写法中的生命周期函数,
    // 第二个参数是依赖项,代表的意思是如果依赖性发生变化,包括值变化
    引用地址变化,则会执行useEffect的函数参数
    // 第二个参数如果写为【】,则类似与componentDidmount,且只会执行一次
    // useEffect返回一个函数,其会在组件卸载的时候会触发
    // 一般是用来清除定时器,或者是清除监听的时候使用
    
    // 但是也有一个坑,就是用redux connect的时候,会发现当redux发生变化的时候,也会触发其返回的那个函数
  • 相关阅读:
    简单的JAVAWeb选课系统
    公文流转系统001
    第九周动手动脑
    JAVA文件操作
    动手动脑-异常处理
    个人NABCD
    水王(课堂作业)
    软件学习进度表07
    软件工程学习进度表06
    软件工程个人作业05(二维数组求最大子数组的和)
  • 原文地址:https://www.cnblogs.com/lisiyang/p/13063850.html
Copyright © 2020-2023  润新知