setstate与mapstatetoprops

2023-12-29 08:08
文章标签 setstate mapstatetoprops

本文主要是介绍setstate与mapstatetoprops,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

兄弟组件中一个组件的setstate不会触发另一个兄弟组件更新,只能通过父级的回调来使另一个组件更新,这是项目中经常用的跨足间通信,setstate并不会使mapstatetoprops重新执行。
react-redux中,一个组件的mapstatetoprops会订阅store,只要state中的某个属性例如num发生变化,即有dispatch操作,那么所有组件的mapstatetoprops都会重新执行计算。虽然所有组件的mapstatetoprops都会重新触发,
但是1:mapstatetoprops中映射的是state中的某个属性(return {test:state.testReducerState.num }),不是state这个对象时:
只有那些在mapstatetoprops中映射了state中的num(即return的对象中有num)的组件才会重新触发render(不管这个num有没有在组件中真实使用到,都会重新render,或者说重新触发该组件的更新及相关生命周期),但是如果num是数值类型的话,num值不变的话就不会触发组件的render,只如果num是数组或者对象的话(浅拷贝),即使值不变也会重新触发组件的渲染。通常state是一个对象,如果只是改变state中的其他属性,没有state中的num属性,也是不会触发组件的重新渲染。那些mapstatetoprops中没有映射出state中的num的组件是不会重新触render的,也不会触发mapstatetoprops中映射的是state这个对象(return {teststate:state.testReducerState })的组件的重新渲染。
2:如果某些组件mapstatetoprops中映射的是state这个对象(return {teststate:state.testReducerState }),那么不管action有没有使对象中属性有没有改变,每次都会重新这些组件的渲染(对象浅拷贝造成的),但是如果属性没有改变那么是不会触发mapstatetoprops中return {test:state.testReducerState.num })的组件的重新渲染。
总结:只有state中的某一属性变化时,redux才会触发映射有该属性的所有组件重新渲染,state中某一属性变化只会影响映射了该属性的组件,不会影响该state中其他属性绑定的组件。单一属性的变化会影响其他mapstatetoprops中绑定整个state的组件的渲染。mapstatetoprops return {teststate:state.testReducerState }中绑定整个state的组件中触发action导致某一属性的变化,只会影响mapstatetoprops中return {teststate:state.testReducerState }这种绑定了该属性的组件的渲染。

setstate是react原生的,mapstatetoprops是redux的,两者是有差异的.
只要redux中有一个state发生了变化,那么不管这个mapstatetoprops和该state有没有关联,所有的mapstatetoprops都会重新计算,这个方法有点像vuex中的计算属性,像vuex中的mapstate

这篇关于setstate与mapstatetoprops的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/548876

相关文章

setState之后发生了什么

categories: [前端,React] thumbnail: /images/fe/state.jpg toc: true 流程图 partialState:setState传入的第一个参数,对象或函数_pendingStateQueue:当前组件等待执行更新的state队列isBatchingUpdates:react用于标识当前是否处于批量更新状态,所有组件公用dirtyCompo

React中对于this.setState参数为函数或对象的问题。

前提:(作者)已经在create-react-app的环境下 相信大家都熟悉React中用于改变状态的this.setState(),在之前并且都已经用过了,this.setState去改变状态,之前我的操作都是直接对其中的属性做出改变,并没有传入对象去改变,但是也引发了一些问题,我也去网上看了一些播客,最后我在这总结一下。 话不多说,直接上代码 首先我们定义两个组建App1 与App2 App

React native 使用Animated 优化连续setState 性能问题

再部分场景下我们需要连续更新state刷新页面。一般情况刷新使用setstate没有问题,当需要连续刷新的情况会有明显的性能问题。 场景:自定义可拖动抽屉组件 新增需求在抽屉活动是更新主页面组件样式,此时需要动态传递抽屉高度修改主页组件属性。 实现:在原有组件增加动画属性的监听: /*** 监听参数变化*/this.watcher = this.animatedViewHeight.ad

在flutter initState 方法,触发 setState导致循环执行

在Flutter中,如果你在initState中调用了一个方法,并且这个方法可能导致状态更新,这可能会引起无限循环,因为每次状态更新都会再次调用initState。 为了避免这种情况,你应该检查调用的方法是否会导致状态更新,如果是,请确保它在initState之外调用,或者在调用之后添加条件判断,确保只有在首次初始化时才调用。 以下是一个简单的例子,展示了如何在initState中调用方法,但

蓝海卓越计费管理系统 agent_setstate.php SQL注入漏洞复现

0x01 产品简介 蓝海卓越计费管理系统是一套以实现网络运营为基础,增强全局安全为中心,提高管理效率为目的的网络安全运营管理系统,提供“高安全、可运营、易管理”的运营管理体验,基于标准的RADIUS协议开发,它不仅支持PPPOE和WEB认证计费,还支持802.1X接入控制技术,与其他厂商支持相应标准的产品兼容,结合蓝海卓越的PPPOE服务器网关,可提供更加丰富的功能。,另外,友好的Web访问管理

react17+18 中 setState是同步还是异步更新

1、类组件中 1.1 react17版本 参考内容:第十一篇:setState 到底是同步的,还是异步的?                   彻底搞懂setState到底是同步还是异步(一) 1、在react可调度范围内(包括react合成事件、生命周期、事件处理中)的setState是异步的,并且多次setState会合并只执行最后一次,进行批量更新。       在react可调度范围

Flutter中setState函数的使用注意事项

文章目录 Flutter中setState函数的使用注意事项只能在具有State对象的类中使用不要在build方法中使用将状态更新逻辑放在setState方法内部避免频繁调用使用回调函数更新状态 Flutter中setState函数的使用注意事项 setState()函数是Flutter中非常重要的一个函数,它用于更新小部件的状态,并通知Flutter框架重新构建小部件。但

谈一谈React的setState的执行机制

React组件显示什么样的数据,都是由数据状态和外部参数所决定的,这个数据状态就是state。 当需要修改数据状态的值,就要调用setState,从而达到更新组件内部数据状态的目的。比如代码: class App extends React.Component {constructor(props) {super(props);this.state =

react useState的初始化函数 初始化值为props时的同步问题 | setState函数的使用与异步更新

文章目录 react setState函数useState()钩子创建state如何根据props更新state值 setState的参数是下一个状态statesetState的参数是更新函数functionsetState异步与同步合成事件setState 实现原理 react setState函数 useState()钩子创建state const [state, se

深入理解React的setState机制

🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》 文章目录 摘要:引言:正文:1️⃣ set