react-redux笔记

本文介绍React-Redux中UI组件与容器组件的区别,讲解如何利用connect()方法连接组件与Redux Store,以及Provider组件的作用。

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

******************************************************************************************************************************************


react-redux笔记
前言:
React-redux将所有的组件分为两大类: UI组件 和容器组件

1、 UI组件
特征:
只负责 UI 的呈现,不带有任何业务逻辑
没有状态(即不使用this.state这个变量)
所有数据都由参数(this.props)提供
不使用任何 Redux 的 API
2、 容器组件
特征:
负责管理数据和业务逻辑,不负责 UI 的呈现
带有内部状态
使用 Redux 的 API
3、 connect()
react-redux提供connect方法 是用来将ui组件生成容器组件的  mapStateToProps会订阅Store,每当state更新的时候,就会自动执行,重新计算UI组件的参数,从而出发UI组件的重新渲染。
【eg】
import { connect } from 'react-redux'
const VisibleTodoList = connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList)
4、 provider组件
主要是用来让容器组件拿到state
【eg】
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import todoApp from './reducers'
import App from './components/App'


let store = createStore(todoApp);


render(
  <Provider store={store}>
<App />
  </Provider>,
  document.getElementById('root')
)
注释:
Provider在根组件外面包了一层,这样一来,App的所有子组件就默认都可以拿到state了
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值