Provider功能主要为以下两点:

  • 在原应用组件上包裹一层,使原来整个应用成为Provider的子组件
  • 接收Redux的store作为props,通过context对象传递给子孙组件上的connect

首先,对原组件进行了封装: render方法中, 渲染了其子级元素, 使整个应用成为Provider的子组件。

(1)this.props children用于获取当前组件的所有子组件

(2)Children为react内部定义的顶级对象, 该对象封装了一些方便操作字组件的方法. Children.only用于获取仅有的一个子组件,没有或者超过一个均会报错. 所以注意: 确保Provider组件的直接子级为单个封闭元素,切勿多个组件平行放置

其次,传递store
(1)constructor方法: Provider初始化时, 获取到props中的store对象;
(2) getChildContext方法: 将外部的store对象放入context对象中,使子孙组件上的connect可以直接访问到context对象中的store。
注: context可以使子孙组件直接获取父级组件中的数据或方法,而无需一层一层通过props向下传递。context对象相当于一个独立的空间,父组件通过getChildContext()向该空间内写值;定义了contextTypes验证的子孙组件可以通过this.context.xxx,从context对象中读取xxx字段的值。

推荐两个博客:

https://segmentfault.com/a/1190000010158572

https://www.jianshu.com/p/815ec73b1354

知识不够,案例来撑:留个github小案例前往

例如react项目的index.js文件

import React from 'react';//引入react库
import ReactDOM from 'react-dom';//引入react-dom插件
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import {Provider} from 'react-redux' //连接react和redux引入Provider
import store from './store'
ReactDOM.render(
(
<Provider store={store}>//用<Provider>包裹App组件,并且传递一个store
<App/>
</Provider>
),
document.getElementById('root')
);
registerServiceWorker();

App.js

import React from 'react';
import './App.css';
import { connect } from 'react-redux'//react关联redux的插件
import { inputChangeAction, addAction, deleteAction } from './store/actionCreator'
// 无状态组件。
// 无状态组件在组件的实现中,只有render函数时,建议使用。
// 提升性能。
const App = (props)=>{
let {value, data} = props;
return (
<div className="App">
<div className="handle">
<p>{value}</p>
<input type="text" value={value} onChange={props.handleInputChange}/>
<button onClick={props.handleAddAction}>新增</button>
</div>
<ul className="list">
{
data.map((item, index)=>{
return (
<li key={item.id}>
{item.val}
<span onClick={props.handleDeleteAction(index)}>X</span>
</li>
)
})
}
</ul>
</div>
);
}
//将store中的state值转为组件的props使用
const mapStateToProps = (state)=>{
return {
//key为组件的props的名字
// value值,为state中的值
value: state.list.value,
data: state.list.data
}
}
//将store中的dispatch转为组件的props使用
const mapDispatchToProps = (dispatch)=>{
return {
//key为组件的props的名字
// value值为事件,内部可以操作dispatch
handleInputChange(ev){
// console.log('触发了');
let action = inputChangeAction(ev.target.value);
dispatch(action);
},
handleAddAction(){
let action = addAction();
dispatch(action);
},
handleDeleteAction(index){
return function(){
let action = deleteAction(index);
dispatch(action);
}}}
}
export default connect(mapStateToProps, mapDispatchToProps)(App);

store文件的index.js

import { createStore, combineReducers } from 'redux'//引入App.js 输出的函数
import listReducer from './listReducer' //引入默认的state
const reuder = combineReducers({
list: listReducer
})
const store = createStore(reuder);
export default store;

react的redux无状态组件的更多相关文章

  1. react 中的无状态函数式组件

    无状态函数式组件,顾名思义,无状态,也就是你无法使用State,也无法使用组件的生命周期方法,这就决定了函数组件都是展示性组件,接收Props,渲染DOM,而不关注其他逻辑. 其实无状态函数式组件也是 ...

  2. 37行代码构建无状态组件通信工具-让恼人的Vuex和Redux滚蛋吧!

    状态管理的现状 很多前端开发者认为,Vuex和Redux是用来解决组件间状态通信问题的,所以大部分人仅仅是用于达到状态共享的目的.但是通常Redux是用于解决工程性问题的,用于分离业务与视图,让结构更 ...

  3. React系列文章:无状态组件生成真实DOM结点

    在上一篇文章中,我们总结并模拟了JSX生成真实DOM结点的过程,今天接着来介绍一下无状态组件的生成过程. 先以下面一段简单的代码举例: const Greeting = function ({name ...

  4. React 中的 Component、PureComponent、无状态组件 之间的比较

    React 中的 Component.PureComponent.无状态组件之间的比较 table th:first-of-type { width: 150px; } 组件类型 说明 React.c ...

  5. React中的高阶组件,无状态组件,PureComponent

    1. 高阶组件 React中的高阶组件是一个函数,不是一个组件. 函数的入参有一个React组件和一些参数,返回值是一个包装后的React组件.相当于将输入的React组件进行了一些增强.React的 ...

  6. React: 无状态组件生成真实DOM结点

    在上一篇文章中,我们总结并模拟了 JSX 生成真实 DOM 结点的过程,今天接着来介绍一下无状态组件的生成过程. 先以下面一段简单的代码举例: const Greeting = function ({ ...

  7. 15. react UI组件和容器组件的拆分 及 无状态组件

    1.组件的拆分 组件拆分的前提 当所有的逻辑都出现在一个组件内时 组件会变得非常复杂 不便与代码的维护 所以对组件进行拆分 IU组件 进行页面渲染 容器组件  进行逻辑操作 UI组件的拆分 新建一个 ...

  8. Flutter入门之无状态组件

    Flutter核心理念 flutter组件采用函数式响应框架构建,它的灵感来自于React.它设计的核心思想是组件外构建UI,简单解释一下就是组件鉴于它当前的配置和状态来描述它的视图应该是怎样的,当组 ...

  9. Blazor中的无状态组件

    声明:本文将RenderFragment称之为组件DOM树或者是组件DOM节点,将*.razor称之为组件. 1. 什么是无状态组件 如果了解React,那就应该清楚,React中存在着一种组件,它只 ...

随机推荐

  1. Hadoop_配置Hadoop开发环境(Eclipse)

    通常我们可以用Eclipse作为Hadoop程序的开发平台. 1)  下载Eclipse 下载地址:http://www.eclipse.org/downloads/ 根据操作系统类型,选择合适的版本 ...

  2. excel无法复制

    空字符(ascii 码 0,在程序里一般写作"\0"),在 vim 里就显示成 ^@. 如果在 vim 里遇到不确定的口字苻,可以在那个字符上按 ga(普通模式下宜接按,先 g 再 ...

  3. Excel2010表格里设置每页打印时都有表头

    在打印Excel表格时常常会出现如果存在多页打印时,往往从第二页开始就会出现没有表头的情况,导致到后面都不清楚对应的是哪个数据,查看时也很麻烦,下面就将为大家介绍如何在Excel表格里设置每页打印时都 ...

  4. 浅谈ThreadLocal模式

    一.前言: ThreadLocal模式,严格意义上不是一种设计模式,而是java中解决多线程数据共享问题的一个方案.ThreadLocal类是java JDK中提供的一个类,用来解决线程安全问题,并不 ...

  5. Jenkins之自动触发部署之插件Generic Webhook Trigger Plugin

    一.安装好插件 二.构建触发器会出现设置trigger的入口 三.设置的两个部分 第一: Jenkins的这个触发器,这里主要是接受post数据.其中Post content parameters是用 ...

  6. Unity Unity脚本类为什么要尽量避免继承MonoBehaviour类?

  7. 【图解】我使用过的 Dubbo 和 Spring Cloud

    自从2015年毕业开始从事 Java 开发工作,已经过去3年多了, 在各种不知名的小公司待过,经历过生产力从低到高,技术从落后到先进的过程, Dubbo 和 Spring Cloud 就是我曾经所经历 ...

  8. 记一次序列化的JSON解析问题

    目录 一.问题初探 二.问题原因 三.解决问题 一.问题初探 我今天在使用Ribbon 远程调用的时候 消费者去消费服务端所提供的服务,在使用Post请求中的PostForEntity传递参数的时候, ...

  9. (四)Redis主从复制(单机版,不集群)

    持久化保证了即使redis服务重启也不会丢失数据,因为redis服务重启后会将硬盘上持久化的数据恢复到内存中,但是当redis服务器的硬盘损坏了可能会导致数据丢失,如果通过redis的主从复制机制就可 ...

  10. 2009年3月新浪PHP面试题及答案(二)

    1.请写出PHP5权限控制修饰符. 答案:private protected public. 2.对于大流量的网站,您采用什么样的方法来解决访问量问题? 答案:首先,确认服务器硬件是否足够支持当前的流 ...