react中使用hooks替代connect_react hook connect-CSDN博客

本文链接：https://blog.csdn.net/mischievous_boy/article/details/108774754

这篇博客探讨了如何在React应用中用Hooks替换`connect`方法来连接Redux。通过`useDispatch`和`useSelector` Hooks，可以直接在组件中获取状态和派发动作，简化了代码。同时，提到了`useSelector`的性能问题，指出需要提供`shallowEqual`作为比较函数以优化不必要的渲染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用hooks代替connect

在react中的connect的使用

import React, { memo, useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux';
import { Carousel, Image } from 'antd'
// import { connect } from 'react-redux';

import { changeRecommendBannersFunc } from 'store/discover/actionsCreator'

import RecommendWrapper from './styled'


const DDRecommend = memo(function DDRecommend (props) {
 const {banners} =props;
  
  useEffect(() => {
   getRecommendBanners ()
  }, [])


  return (
    <RecommendWrapper className='wrap-v1'>
      <div>
        <Carousel autoplay className='banners-img-outer' >
          {
            banners.map((item, index) => {
              return (
                <a href="" className='banners-img-link' key={index}>
                  <img className='banners-img' src={item.imageUrl} alt="" />
                </a>
              )

            })
          }
        </Carousel>
        <div>dfasd</div>

      </div>
    </RecommendWrapper>
  )
})

const mapStateToProps = store => {
  return {
    banners: store.discoverInfo.banners
  }
}

const mapDispatchToProps = dispatch => {
  return {
    getRecommendBanners () {
      dispatch(changeRecommendBannersFunc)
    }
  }
}


export default connect(mapStateToProps, mapDispatchToProps)(DDRecommend)

使用hooks解决

import React, { memo, useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux';
import { Carousel, Image } from 'antd'
// import { connect } from 'react-redux';

import { changeRecommendBannersFunc } from 'store/discover/actionsCreator'

import RecommendWrapper from './styled'


const DDRecommend = memo(function DDRecommend (props) {
  const dispatch = useDispatch();


  const { banners } = useSelector(state => ({
    banners: state.discoverInfo.banners
  }))

  useEffect(() => {
    dispatch(changeRecommendBannersFunc())
  }, [dispatch])

  return (
    <RecommendWrapper className='wrap-v1'>
      <div>
        <Carousel autoplay className='banners-img-outer' >
          {
            banners.map((item, index) => {
              return (
                <a href="" className='banners-img-link' key={index}>
                  <img className='banners-img' src={item.imageUrl} alt="" />
                </a>
              )

            })
          }
        </Carousel>
        <div>dfasd</div>

      </div>
    </RecommendWrapper>
  )
})


export default DDRecommend;

但是使用connect解决的时候，内部对这个组件做了优化，当这个组件内部的子组件里的props没有依赖父组件里的变量或者是依赖的变量没有发生改变的时候，子组件是不会进行刷新的，因为内部做了浅层比较，但是使用hook的时候，他们内部是没有进行浅层比较的，如果要完成优化，需要对useSelector传入第二个参数，浅层比较的函数

import { useDispatch, useSelector, shallowEqual } from 'react-redux';

.
.
.
.
.
  

const { banners } = useSelector(state => ({
    banners: state.discoverInfo.banners
  }), shallowEqual)