学习React第十二篇：收到新的Props时控制React组件更新（shouldComponentUpdate）

最新推荐文章于 2024-07-09 05:51:10 发布
最新推荐文章于 2024-07-09 05:51:10 发布
阅读量1k 收藏 1
点赞数
分类专栏： # Reactjs 入门教程 文章标签： React ReceiveProps ComponentUpdate DidUpdate
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_20613731/article/details/109625911
版权
本文探讨React组件的生命周期方法，特别是componentWillReceiveProps和shouldComponentUpdate。这两个方法在组件接收到新props时发挥作用，允许控制组件何时更新。componentWillReceiveProps在props更新前调用，shouldComponentUpdate则用于设定组件更新的条件。文章提醒，这些方法已被标记为旧版，建议使用备忘录或组件完全控制来替代。
摘要由CSDN通过智能技术生成

继编写 使用生命周期方法管理React组件状态

先回顾下每个组件都有几个常用的“生命周期方法”，您可以重写它们以在流程中的特定时间运行代码。以下为常用的生命周期方法的图解：

### React组件生命周期将允许您在运行时更新组件。 这里将探讨如何做到这一点。 componentWillReceiveProps 让我们有机会通过在进行render调用之前对props过渡做出反应来更新状态。 shouldComponentUpdate允许我们设置何时更新组件的条件，以使我们不会不断渲染。 componentDidUpdate让我们对组件更新做出反应。

在本篇中，我们将讨论组件中可用的更新生命周期方法：

示例文件 PropsReceived.js：


                

        

        

    

  


        

            

                

                

                了解本专栏
                
                
                  
                订阅专栏 解锁全文
                 
                
                    
                    超级会员免费看
                
            

            
            
            
        

    

      

        

            

              
                
                  最孤单的人
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          

                

                        订阅专栏
                









                



	

		

			

				
					
学习React第十三篇：使用映射从数据数组创建React组件

				
			

			

				

					最孤单的人的博客
				

				

					11-12
					
					754
					
				

			

		

		

			
				
### React组件可以基于数据集动态生成。本课将向您展示如何通过映射state.data对象来完成此操作。

			
		

	



                

            
              



	

		

			

				
					
前端面试话术集锦第 14 篇：高频考点（React常考基础知识点）

				
			

			

				

					念兮为美
				

				

					09-12
					
					618
					
				

			

		

		

			
				
Reconciliation阶段可以被打断，故Reconciliation阶段执行的生命周期函数可能会出现调用多次的情况，从而引起Bug。故对于Reconciliation阶段调用的几个函数，除了shouldComponentUpdate，其他都应该避免使用，且V16中引入了新的API来解决这个问题。setState在React中是常用的API，但它存在一些的问题经常会导致初学者出错，核心原因是这个API是异步的。父子组件通信；兄弟组件通信；跨多层级组件通信；任意组件：通过Redux或Event Bus解决

			
		

	



              


  
              

                


	

		

			

				
					
详解React中传入组件的props改变时更新组件的几种实现方法

				
			

			

				

					10-18
				

			

		

		

			
				
主要介绍了详解React中传入组件的props改变时更新组件的几种实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

			
		

	





	

		

			

				
					
[react] 在React中组件的props改变时更新组件的有哪些方法？

				
			

			

				

					歌谣的博客
				

				

					11-21
					
					774
					
				

			

		

		

			
				
[react] 在React中组件的props改变时更新组件的有哪些方法？

新版用 getDerivedstatefromProps(nextProps){ 业务逻辑}

个人简介

我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论


主目录

与歌谣一起通关前端面试题



...

			
		

	



		

			
		



	

		

			

				
					
[译] 深入解析React中state和props更新

				
			

			

				

					weixin_34268753的博客
				

				

					05-16
					
					1117
					
				

			

		

		

			
				
原文链接：medium.com/react-in-de…
到react fiber内部一探究竟

在我之前文章Fiber内部：深度概述React新协调算法中，我铺设了基础内容，用于理解我这篇文章讲解的更新处理的技术细节。
我已经概述过将在这篇文章中用到的主要数据结构和概念，特别是Fiber节点、当前和工作过程树、副作用和作用列表，我也对主要的算法提供过大致的说明，且解释过**render和comm...

			
		

	





	

		

			

				
					
 React中传入组件的props改变时更新组件的几种实现方法

				
			

			

				

					weixin_34406086的博客
				

				

					09-12
					
					5891
					
				

			

		

		

			
				
我们使用react的时候常常需要在一个组件传入的props更新时重新渲染该组件，常用的方法是在componentWillReceiveProps中将新的props更新到组件的state中（这种state被成为派生状态（Derived State）），从而实现重新渲染。React 16.3中还引入了一个新的钩子函数getDerivedSta...

			
		

	





	

		

			

				
					
React学习手册完整版带目录.zip

				
			

			

				

					06-25
				

			

		

		

			
				
当组件状态改变时，React通过计算虚拟DOM的差异（Diff算法）来最小化实际DOM的更新。  4. **状态管理和 Props**：React中的状态管理和Props是数据流的关键。手册会讲解如何使用`this.setState()`来管理组件内部状态...

			
		

	





	

		

			

				
					
react 向子组件传值 props中去取最新的值

				
			

			

				

					卡卡罗特的博客
				

				

					04-27
					
					3120
					
				

			

		

		

			
				
在react中父组件在向子组件传值时，如果父组件的值发生了改变，子组件的接收的参数值也需要接收最新的值，更新组件

这里就需要使用componentWillReceiveProps(nextProps)，

react生命周期中，可以在子组件的render函数执行前获取新的props，从而更新子组件自己的state。

例子：

父组件向子组件传值,子组件接收父组件参赛：


import ...

			
		

	





	

		

			

				
					
react中父级props改变，更新子级state的多种方法

				
			

			

				

					weixin_30410119的博客
				

				

					02-06
					
					1096
					
				

			

		

		

			
				
子组件：

class Children extends Component {
  constructor(props) {
     super(props);
     this.state = {
       a: this.props.a,
       b: this.props.b,
       treeData: '',
       targets: '',...

			
		

	





	

		

			

				
					
react数据管理之setState与Props

				
			

			

				

					xxx
				

				

					10-09
					
					495
					
				

			

		

		

			
				
React 不会直接修改当前状态对象，而是创建一个新的状态对象，以确保不直接修改状态，从而遵循 React 的不可变性原则。父组件通过属性（props）将数据传递给子组件，子组件不可以直接修改这些数据，它们是只读的。：React 会将新生成的虚拟 DOM 树与之前的虚拟 DOM 树进行比较，找出两者之间的差异（所谓的变更集合）。：当父组件的 props 发生变化时，会触发子组件的重新渲染，子组件会接收新的 props。：当组件的状态（state）发生变化时，会触发组件的重新渲染，从而更新界面。

			
		

	





	

		

			

				
					
React性能优化之shouldComponentUpdate

				
			

			

				

					高大志leo的博客
				

				

					11-29
					
					6276
					
				

			

		

		

			
				
前言：

React 构建并维护了一套内部的 UI 渲染描述。它包含了来自你的组件返回的 React 元素。该描述使得 React 避免创建 DOM 节点以及没有必要的节点访问，因为 DOM 操作相对于 JavaScript 对象操作更慢。虽然有时候它被称为“虚拟 DOM”，但是它在 React Native 中拥有相同的工作原理。

当一个组件的 props 或 state 变更，React 会将最新返回的元素与之前渲染的元素进行对比，以此决定是否有必要更新真实的 DOM。当它们不相同时，React 会更

			
		

	





	

		

			

				
					
react父组件更改props子组件无法刷新原因

				
			

			

				

					lvfengxian2019的博客
				

				

					09-06
					
					6554
					
				

			

		

		

			
				
react父子传值问题

			
		

	





	

		

			

				
					
react props更新页面数据没有变化 componentDidUpdate真的有用

				
			

			

				

					weixin_43915401的博客
				

				

					01-21
					
					3773
					
				

			

		

		

			
				
子组件将props的值存放到state之后，
（componentDidMount中调用setState或直接给state赋值this.props.xx）
使用state中的值而不是直接调用this.props.xx，
props的更新不会修改state中的值，
（页面数据不会发生变化！！！）、
如果需要时时更新页面数据的话
1 直接使用this.props.xx
但是当前值需要处理，必须放到state中就没办法了
2 在

...

			
		

	





	

		

			

				
					
react中componentWillReceiveProps()在props不改变的时候也可能被调用

				
			

			

				

					淡然坊
				

				

					06-18
					
					4万+
					
				

			

		

		

			
				
最近在写react时，需要在props被改变时更新一些东西，所以使用了componentWillReceiveProps方法，但是却发现该方法总是在各种没有改变props的情况下被调用，觉得很奇怪，遂询问我导师（我导师超厉害的！），我导师说这个方法确实有可能在props不改变的情况下被调用，所以需要在方法里手动判断一下this.props和nextProps是否相同，不相同了才执行我的更新方法。于...

			
		

	





	

		

			

				
					
在React中深入理解状态（State）及状态更新机制

					
最新发布

				
			

			

				

					一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
				

				

					07-09
					
					1415
					
				

			

		

		

			
				
状态（State）是React组件的一部分，用于存储组件的局部变量，这些变量可以影响组件的渲染输出。状态可以是任何类型的JavaScript值，包括但不限于数字、字符串、数组和对象。

			
		

	





	

		

			

				
					
React 学习笔记（14）：组件的生命周期

				
			

			

				

					f18855666661的博客
				

				

					03-13
					
					2993
					
				

			

		

		

			
				
1，生命周期函数的理解

组件从创建到死亡会经历一些特定的阶段。
	React 组件中包含一系列的钩子函数（生命周期回调函数），会在特定的时刻调用。
	我们在定义组件时，会在特定的生命周期函数中做对应的工作。


2，React 旧版生命周期函数

2-1，旧版生命周期函数图





2-2，旧版生命周期函数单独讲解

componentWillMount：在组件挂载前触发执行。
	componentDidMount：在组件完成组件挂载后触发执行。
	componentWillReceiveProps：父

			
		

	





	

		

			

				
					
React生命周期方法之 componentDidUpdate

					
热门推荐

				
			

			

				

					star_zone的博客
				

				

					03-22
					
					5万+
					
				

			

		

		

			
				
componentDidUpdate这个生命周期方法可能在开发中用的比较少，但是也相当好用！

一、最近在用antd-moblie做图片上传，看官方提供的API：



手机端的ImagePicker组件并没有像PC端的那样，在上传事件中提供直接去调后台的action，要是做成选择好几张后，然后那几张同时上传，那就简单，但是业务要求的是一选择就上传，但是组件又不支持，怎么办呢？继续往下看：

首先...

			
		

	





	

		

			

				
					
React性能优化问题，React生命周期函数shouldComponentUpdate、纯组件PureComponent详解（含实例）

				
			

			

				

					Easylee的博客
				

				

					05-17
					
					1298
					
				

			

		

		

			
				
目录

1_shouldComponentUpdate、纯组件PureComponent的作用

2_实例

1_shouldComponentUpdate、纯组件PureComponent的作用

shouldComponentUpdate、纯组件PureComponent都是用来做性能优化的，这两种方法可以避免子组件做无用的重复渲染，下面通过实例来演示这两种性能优化的方法。

2_实例

创建父组件悟空Wukong、子组件悟饭Wufan、子组件悟天Wutian。
在第一次render后，通过compon

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值