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发生变化的时候,也会触发其返回的那个函数

 

posted @ 2020-06-08 09:39  饭饭大人  阅读(408)  评论(0编辑  收藏  举报