彻底弄懂React-Redux组件通信

最新推荐文章于 2025-03-19 09:20:32 发布

杜小白Zero

最新推荐文章于 2025-03-19 09:20:32 发布

阅读量4.7k

点赞数 1

分类专栏： react 文章标签： react react-redux react-router react组件通信 react页面跳转

本文链接：https://blog.youkuaiyun.com/DFF1993/article/details/80410154

版权

本文详细介绍了React-Redux的组件通信机制，包括容器组件和傻瓜组件的角色，以及connect和Provider的用法。connect函数用于连接容器组件和傻瓜组件，通过mapStateToProps和mapDispatchToProps处理状态和动作。Provider组件则用于在整个应用中提供Redux的store，实现组件间通信和react-router的页面跳转。

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

 
  为了方便使用，Redux的作者封装了一个React专用的库React-Redux，讲解之前，先来了解一下什么是容器组件和傻瓜组件？ 

 
  React-Redux把组件分为容器组件和傻瓜组件（UI组件）。 

一、容器组件

 
 容器组件，负责和Redux Store打交道的组件，处于外层。 

 
 功能：和Redux Store打交道，读取Store的状态，用于初始化组件的状态，同时还要监听Store的状态改变；当Store状态发生变化时，需要更新组件状态，从而驱动组件重新渲染；当需要更新Store状态时，就会派发action对象。 

 
 特征： 

负责管理数据和业务逻辑，不负责UI的呈现
带有内部状态
使用Redux的API

二、傻瓜组件

 
 傻瓜组件也叫做UI组件，只专心负责渲染界面的组件，处于内层。 

 
 功能：根据当前props和state，渲染出用户界面。 

 
 特征： 

只负责UI的呈现，不带有任何业务逻辑；
没有状态（即不使用this.state这个变量）
所有数据都由参数（this.props）提供；<

最低0.47元/天解锁文章