使用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...