即使在属性更改后也不调用ReactJS componentDidUpdate
在ReactJS中，componentDidUpdate是一个生命周期方法，它在组件更新后被调用。然而，即使在属性更改后，也不会直接调用componentDidUpdate方法。
在React中，当组件的props或state发生变化时，会触发组件的重新渲染。在重新渲染过程中，React会比较新旧props和state的值，如果有变化，会更新组件的DOM以反映这些变化。在这个过程中，React会依次调用以下方法：
- static getDerivedStateFromProps(nextProps, prevState)：这个静态方法在props发生变化时被调用，它接收新的props和之前的state作为参数，并返回一个新的state。这个方法可以用来根据props的变化来更新state。
- shouldComponentUpdate(nextProps, nextState)：这个方法在props或state发生变化后，重新渲染之前被调用。它接收新的props和state作为参数，并返回一个布尔值，用于决定是否需要重新渲染组件。默认情况下，React会对所有的props和state变化都重新渲染组件，但我们可以在shouldComponentUpdate方法中进行优化，避免不必要的重新渲染。
- render()：这个方法根据最新的props和state，返回一个React元素，用于构建组件的DOM结构。
- getSnapshotBeforeUpdate(prevProps, prevState)：这个方法在render方法之后、更新DOM之前被调用。它接收之前的props和state作为参数，并返回一个值，可以在componentDidUpdate方法中使用。
- componentDidUpdate(prevProps, prevState, snapshot)：这个方法在组件更新后被调用。它接收之前的props、state和snapshot作为参数，可以用来执行一些副作用操作，比如发送网络请求或操作DOM。
所以，即使在属性更改后，React并不会直接调用componentDidUpdate方法。而是在重新渲染组件的过程中，依次调用上述的生命周期方法。如果你想在属性更改后执行一些操作，可以在componentDidUpdate方法中进行处理。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云云服务器（CVM）：提供可扩展的云服务器实例，满足不同规模和需求的应用场景。详情请参考：https://cloud.tencent.com/product/cvm
- 腾讯云云数据库MySQL版：提供高性能、可扩展的MySQL数据库服务，适用于各种规模的应用。详情请参考：https://cloud.tencent.com/product/cdb_mysql
- 腾讯云人工智能平台（AI Lab）：提供丰富的人工智能服务和工具，包括图像识别、语音识别、自然语言处理等。详情请参考：https://cloud.tencent.com/product/ailab
- 腾讯云物联网平台（IoT Hub）：提供全面的物联网解决方案，帮助用户快速构建和管理物联网设备。详情请参考：https://cloud.tencent.com/product/iothub
- 腾讯云移动推送（TPNS）：提供高效可靠的移动推送服务，帮助开发者实现消息推送功能。详情请参考：https://cloud.tencent.com/product/tpns
相关·内容
1回答
即使在属性更改后也不调用ReactJS componentDidUpdate
javascript、reactjs、functional-programming、draftjs
我正在为react使用draft-js，在那里我进行api调用(在一个功能性的父组件中)，并获得要放入编辑器中的内容。在props中接收数据后，我使用以下代码将获取的数据插入到编辑器中： 父组件： var draftContent = ""; boxWidth="100%"
boxHeight="155
浏览 22提问于2020-07-27得票数 0
1回答
componentDidUpdate()在状态更改时进行更新，即使状态不正常
firebase、react-native、google-cloud-firestore
我的数据库中有一个未读属性，用于计算unreadCount。现在，我正在使用Firebase，并添加了一个侦听器，说明未读属性何时在我的componentDidMount()中更改。(obj)中，我正在更新state.unreadCount，这会导致componentDidUpdate(prevProps)再次运行，即使我的条件不满足。显然，即使条件不满足，componentDidUpdate也被多次调用。每次<em
浏览 3提问于2020-06-28得票数 0
1回答
更新 只要我在我的react应用程序中的另一个“页面”上，@Doppoio的解决方案就可以工作。>
</Route> 如果我在app中从路由/faqs开始，我的外部按钮导航到/tryon/242/jumper-23，我的组件可以识别product_sku属性。但是，当我在/tryon/242的应用程序页面上单击一个外部按钮导航到/tryon/242/jumper-23时，该组件应该知道jumper-23
浏览 15提问于2020-12-17得票数 0
回答已采纳
2回答
Foundation.js在包含散列URI的页面上不起作用
javascript、jquery、zurb-foundation、zurb-foundation-5
我已经启用了accordion和form-abide，当页面在散列URI中时，它们都不会执行任何操作。当我禁用我的客户端路由时，它可以工作。
浏览 4提问于2015-09-22得票数 2
2回答
ReactJS更新类
reactjs
我对ReactJS非常陌生，当按下按钮时，我正在尝试更新我的一个类。该程序是一个健身应用程序，向依赖目录的用户显示数据。例如:男性-1- video.mp4 /男性-2- video.mp4我想要做的是有效地重新呈现类，再次调用componentDidMount函数，并将类的状态更改为新信息，因为目录位置的全局变量在按下按钮时已经更新。在<
浏览 5提问于2015-10-20得票数 0
当组件在componentWillUpdate或componentDidUpdate中重复调用setState时，可能会发生这种情况。React限制嵌套更新的数量，以防止无限循环。
浏览 19提问于2020-05-20得票数 0
回答已采纳
3回答
如何重新填充子组件中的数据？
reactjs
根据here的描述，目前我在ComponentDidMount进行了这个ajax调用。由于状态更新不会触发ComponentDidMount，当同一组件中的下拉列表上存在选择更改时，我如何重新触发数据拉取？ 谢谢
浏览 35提问于2018-12-30得票数 0
回答已采纳
2回答
为什么componentDidUpdate会多次运行
reactjs、react-lifecycle
我在componentDidUpdate()中运行console.log，看到它多次运行
浏览 2提问于2018-11-16得票数 2
1回答
用于特定用例的componentWillReceiveProps的替代方案
reactjs、redux、react-router、lifecycle、react-component
由于不推荐使用componentWillReceiveProps，我听说了使用componentDidUpdate的替代方法，但问题是，在状态更改时也会调用componentDidUpdate。用例1:我的页面顶部有一个搜索栏，当用户在搜索栏中输入并单击搜索按钮时，所有其他组件都必须执行某些操作。因此，当搜索字符串时，我常常在redux中设置状态。每次调用componentWillReceiveProps时，我都会执行特定的操作，因为
浏览 0提问于2019-08-16得票数 1
回答已采纳
2回答
React生命周期方法
reactjs、lifecycle
例如，didMount显然是用于ajax请求或调用数据，然后将其加载到应用程序中但是static getDerivedStateFromProps这是为了提高性能，还是在应用程序中添加了其他东西？
还有componentDidUpdate，这是为了提高性能，还是在哪里是一个很好的例子，我可以使用这些？
浏览 1提问于2018-05-04得票数 0
1回答
recompse-初始化属性仅一次
javascript、reactjs、recompose
我是Reactjs初学者，刚刚开始开发一个使用react-recompose模块的现有Reactjs项目。最后，用户将单击“保存”，属性状态将发送到服务器。实际上正在发生的事情是，在子类调用父处理程序(该父处理程序修改该属性<
浏览 0提问于2018-04-01得票数 0
4回答
什么是“更新”的反应？
javascript、reactjs
正如所说：
但我注意到，即使浏览器DOM元素没有更新，也会调用componentDidUpdate()。
浏览 1提问于2018-11-12得票数 5
回答已采纳
2回答
React，如何在更新DOM后立即获取元素的大小
javascript、reactjs
我想在更新属性后获得元素大小，所以我尝试通过componentDidUpdate()获得它，但每次它都返回0 我写了一个由它的父组件控制的组件，在父组件中，调用了setState的语句，来改变我的组件的属性然后，我想在道具更改后立即在组件中获取div的大小，所以我将代码放在componentDidUpdate()中，但clientHeight和getBoundingClientRect()都返回0，实际上constructor(pro
浏览 60提问于2019-01-24得票数 1
4回答
属性更改时componentDidMount未触发
reactjs、react-redux
我尝试了getDerivedStateFromProps()和componentDidUpdate()方法，但都没有成功。欢迎任何解决方案或建议。
浏览 171提问于2021-05-02得票数 0
回答已采纳
1回答
如何使用来自React Router的路由参数发出axios请求，然后根据响应更新状态？
javascript、reactjs、react-router、axios、url-parameters
这就是我目前在VideoPage组件中做的事情，它不起作用： export default class VideoPage extends Component {
mainVideo: defaultVideo }
componentDidUpdate// render several components, passing them pieces of state from
浏览 25提问于2020-12-19得票数 1
回答已采纳
1回答
反应scrollTop无效
javascript、html、reactjs、dom
我有一个具有可滚动div的react组件，我试图让div在挂载后滚动到底部： var scrollNode = ReactDOM.findDOMNodethis.scrollElement);}
scrollNode存在并反映正确的div，但是，scrollTop的值从未更改过(即使我将它设置为任意数字)，滚动也不会发生。
浏览 3提问于2017-03-01得票数 1
回答已采纳
2回答
自定义元素双向绑定更新，无需触发valueChange
javascript、aurelia
这里有一种情况，即使我在自定义元素内部更改了可绑定属性value，也会调用valueChanged。如何在不触发可绑定值的valueChanged的情况下，将更新后的值从自定义元素发送回viewModel。
有没有办法抑制这一点呢？或者，如果这是从内部代码或视图调用的，我必须使用内部跟踪？
浏览 18提问于2017-01-18得票数 3
回答已采纳
3回答
在哪里使用componentDidUpdate进行反应
reactjs、react-component
在发展的世界里，我是一个完全的新手。我正在尝试制作一个应用程序，我们在那里获取电影。我们可以搜索和排序。我现在不想使用任何插件。 filteredMovies : response.data.results });
<em
浏览 4提问于2020-12-31得票数 0
回答已采纳
2回答
将ref向上传递到react中的父级
javascript、reactjs
它工作得很好，但当我试图在另一个函数中引用this.state.myRefs.current以使用.focus()时，它返回null。
浏览 20提问于2019-01-14得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
