详细分析了连接()方法在反应归来
装配将所有成分反应循环分为两大类:显示组件(组件),容器组件
显示组件具有以下功能:
只负责UI演示,不需要任何业务逻辑
无状态(即,没有this.state变量)
所有数据都是由参数(这个道具)提供的。
不使用任何终极版的API
容器组件具有以下特性:
负责管理数据和业务逻辑,不负责UI的呈现
内部状态
使用原有的API
总结是一个要点:显示组件负责UI的呈现,容器组件负责管理数据和逻辑。
连接法分析
下图是连接()的概念图。
它可以概括如下:
mapstatetoprops必须的功能,如输入逻辑,
mapdispatchtoprops可以是一个函数,或者一个目标,作为一个输出,
连接()签名
连接({ mapstatetoprops },{ mapdispatchtoprops },{ mergeprops },{选项})
连接反应Redux存储组件。
连接操作不改变原组件类,而不是返回一个新的组件类,已经连接到回家的商店。
参数
1,{ mapstatetoprops(状态,{ ownprops }):stateprops }(功能):如果该参数定义,组件将监控Redux商店的变化。在任何时候,只要回家的店面,mapstatetoprops函数将被调用,回调函数必须返回一个纯粹的对象,这是随着构件的道具合并。如果省略此参数,组件不会听回来的商店。如果在回调函数的第二个参数ownprops指定该参数的值传递给该组件的道具,和mapstatetoprops会被调用,只要组件接收新的道具。
2,{ mapdispatchtoprops(调度,{ ownprops }):dispatchprops }(对象或函数):如果传递的是对象,每个对象在函数定义将被视为回归行动的创造者,和Redux店绑定在一起的对象,它定义的名称作为属性名称,合并成组件道具。如果转让是一个函数,该函数将收到一个调度函数,然后由你来决定如何返回一个对象,该对象通过调度功能和行动的创造者以某种方式结合在一起的(辅助功能bindactioncreators提示:你可以使用Redux()),如果你忽略了这个mapdispatchtoprops参数默认情况下,调度将注入你的组件的道具。如果第二参数ownprops指定的回调函数,该参数的值传递给该组件的道具,和mapdispatchtoprops会被调用,只要组件接收新的道具。
3,{ mergeprops(stateprops,dispatchprops,ownprops):道具}(功能):如果指定此参数,对mapstatetoprops执行结果()和()mapdispatchtoprops和元件本身的道具将被导入到回调函数返回的对象的回调函数将被作为道具的包装组件通过。你可以使用这个回调函数滤波器基于组件的道具状态数据的一部分,或绑定一个特定的变量在道具行动的创造者。如果省略此参数默认情况下返回object.assign(ownprops,stateprops,dispatchprops { })的结果。
4、{选项}(对象)如果指定此参数,则可以自定义连接器的行为。
{纯=真}(布尔):如果是真的,连接器将执行shouldcomponentupdate和浅mergeprops结果,避免不必要的更新,前提是当前组件是一个纯组分,它不依赖于任何输入或状态只依赖于道具和Redux存储状态的默认值是true。
{ withref =假}(布尔):如果是真的,连接器将节省一个参考的包装组件的实例,它是通过getwrappedinstance()方法的默认值是false。
返回值
根据配置信息,返回注入状态和动作创建者的响应组件。
容器组件使用连接()连接到回家的方法
我们将一个笨拙的反成与连接组件(容器)提供的react-redux.connect()方法允许您指定从Redux店要获得组件的精确状态。这可以让你在任何级别的粒度得到数据。
让我们看看,我们有一个显示模块,它通过道具和功能onincrement值。单击增量按钮时,它将调用此函数。
进口{ } from'react组件;
导出默认类计数器扩展组件{
渲染(){
返回(
{这个道具。值}
);
}
}
集装箱/ countercontainer.js
进口{ } from'react组件;
进口{ } from'react-redux连接;
从计数器/组件/计数器导入计数器;
{ }进口增量的 / actionscreators..;
全球终极版 / /状态的组件访问我们想要的道具是什么
功能mapstatetoprops(州){
返回{
价值:state.counter
};
}
什么是动作/创建我们想要通过道具获得的功能
功能mapdispatchtoprops(调度){
返回{
onincrement:(派遣)=(增量())
};
}
导出默认连接(
mapstatetoprops,
mapdispatchtoprops
(计数器);
总结
连接二反应背后的支架组件添加道具,括号中的第一个参数是用来改变支柱的组件的方法,第一架有两个参数,第一个参数是一个函数,返回一个对象,该对象是支撑构件的关键属性,值为支柱的价值;第二个参数是一个函数,返回一个对象,该对象是相同的键属性名称,支柱,是调度回来的值,当支柱财产是用来触发,调度会在回家的状态变化的价值。
以上就是本文的全部内容。希望本文的内容能给大家的学习或工作带来一定的帮助。如果有任何疑问,您可以留言交流,谢谢您的支持。