react中使用hooks替代connect

2021-10-09 18:09:59 字數 1369 閱讀 7272

使用hooks代替connect

在react中的connect的使用

import react,  from 'react'

import from 'react-redux';

import from 'antd'

// import from 'react-redux';

import from 'store/discover/actionscreator'

const ddrecommend = memo(function ddrecommend (props) =props;

useeffect(() => , )

return (

banners.map((item, index) => alt="" //>)})

}dfasd

)})const mapstatetoprops = store =>

}const mapdispatchtoprops = dispatch =>

}}export default connect(mapstatetoprops, mapdispatchtoprops)(ddrecommend)

使用hooks解決

import react,  from 'react'

import from 'react-redux';

import from 'antd'

// import from 'react-redux';

import from 'store/discover/actionscreator'

const ddrecommend = memo(function ddrecommend (props) = useselector(state => ())

useeffect(() => , [dispatch])

return (

banners.map((item, index) => alt="" //>)})

}dfasd

)})export default ddrecommend;

但是使用connect解決的時候,內部對這個元件做了優化,當這個元件內部的子元件裡的props沒有依賴父元件裡的變數或者是依賴的變數沒有發生改變的時候,子元件是不會進行重新整理的,因為內部做了淺層比較,但是使用hook的時候,他們內部是沒有進行淺層比較的,如果要完成優化,需要對useselector傳入第二個引數,淺層比較的函式

import  from 'react-redux';..

...

const = useselector(state => (), shallowequal)

hooks 使用dva hooks 中使用dva

hooks 中使用dva reacts hooks已經問世很久了今天來記錄下如何在hooks是使用dva,眾所周知函式是不可以是不可以使用修飾符修飾的,因為函式存在變數提公升問題。所以大多數人有選擇再次掏出自己的redux,但是redux使用起來確實沒有dva方便,那麼下面就讓我們看看如何在hook...

了解 React 之 hooks(三)

在前面的文章 了解 react 之 hooks 二 中介紹了 hooks 的 3 個效能優化 api,分別為 react.memo react.usecallback react.memo。本文主要介紹 useeffect 的第二個引數。1.使用 useeffect,不給第二個引數 import r...

react 16 Hooks渲染流程

react對usestate進行了封裝,呼叫了mountstate。function usestate initialstate s s,s,dispatch finally 如果initialstate是函式還可以執行。生成乙個dispatch方法,通過閉包繫結當前states。把初始值存到mem...