react笔记之学习之state注意事项

最新推荐文章于 2024-10-31 17:31:40 发布
最新推荐文章于 2024-10-31 17:31:40 发布
阅读量192 收藏
点赞数
分类专栏： 前端核心学习小结 文章标签： react.js 学习 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/geyaoisnice/article/details/128062526
版权
本文是前端开发者歌谣的个人笔记，分享了关于React中state的重要注意事项。包括state作为被React管理的变量，其更新导致的组件自动重新渲染特性，以及在对象更新和异步操作中的细节。同时，提供了代码案例来说明这些概念。
摘要由CSDN通过智能技术生成

前言

我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 微信公众号前端小歌谣 关注公众号带你进入前端学习交流群

state注意事项

/*
* state
* - state实际就是一个被React管理的变量
* 当我们通过setState()修改变量的值时，会触发组件的自动重新渲染
* - 只有state值发生变化时，组件才会重新渲染
* - 当state的值是一个对象时，修改时是使用新的对象去替换已有对象
* - 当通过setState去修改一个state时，并不表示修改当前的state
* 它修改的是组件下一次渲染时state值
* - setState()会触发组件的重新渲染，它是异步的
* 所以当调用setState()需要用旧state的值时，一定要注意
* 有可能出现计算错误的情况
* 为了避免这种情况，可以通过为setState()传递回调函数的形式来修改state值
*
* */

代码案例


                

                
                
        

        

    

  


        

            

                

                

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

            
            
            
        

    

      

        

            

              
                
                  前端大歌谣
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          

                

                        订阅专栏
                









                



	

		

			

				
					
react 传递非state给子元素的注意事项

				
			

			

				

					liudanyang_21的博客
				

				

					08-13
					
					149
					
				

			

		

		

			
				
我们是使用react的时候，其实很多情况都不需要使用state去存储值，如果不涉及页面渲染的值，我们往往可以使用 this.xxx的方式；这样可以提高组件的性能，避免不必要的 re_render 带来的消耗
但是如果不稍加注意，可能就会给自己带来很多隐患，甚至bug；
请看如下代码：用非state值向子组件传递一个page属性

export default class Test extends PureComponent {
  constructor(props) {
    super(props);

			
		

	



                

            
              



	

		

			

				
					
react之初识state

				
			

			

				

					weixin_73918953的博客
				

				

					04-25
					
					1010
					
				

			

		

		

			
				
当一个组件需要在多次渲染间“记住”某些信息时使用 state 变量。State 变量是通过调用useStateHook 来声明的。Hook 是以use开头的特殊函数。它们能让你 “hook” 到像 state 这样的 React 特性中。Hook 可能会让你想起 import：它们需要在非条件语句中调用。调用 Hook 时，包括useState，仅在组件或另一个 Hook 的顶层被调用才有效。useStateHook 返回一对值：当前 state 和更新它的函数。

			
		

	



              


  
              

                


	

		

			

				
					
React State

				
			

			

				

					weixin_44530344的博客
				

				

					09-08
					
					180
					
				

			

		

		

			
				
在React中，当组件渲染完毕后，再修改组件中的变量，不会使组件重新渲染 要使得组件可以收到变量的影响，必须在变量修改后对组件进行重新渲染这里我们就需要一个特殊变量，当这个变量被修改使，组件会自动重新渲染。

			
		

	





	

		

			

				
					
React 18：state概念与使用、注意问题

				
			

			

				

					七七的博客
				

				

					12-12
					
					1779
					
				

			

		

		

			
				
props中的所有属性都是不可变的，这使得React组件不能随着props的改变而改变。但在实际的开发中，我们更希望的是数据发生变化时，页面也会随着数据一起变化。React为我们提供了state用来解决这个问题。state和props类似，都是一种存储属性的方式，但是不同点在于state只属于当前组件，其他组件无法访问。并且state是可变的，当其发生变化后组件会自动重新渲染，以使变化在页面中呈现。在React中，当组件渲染完毕后，再修改组件中的变量，不会使组件重新渲染。

			
		

	



		

			
		



	

		

			

				
					
React三大属性之一 state的一些简单的理解

				
			

			

				

					ｎｅｗｘｃ
				

				

					09-13
					
					909
					
				

			

		

		

			
				
什么是state

React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。组件的任何UI改变，都可以从State的变化中反映出来；State中的所有状态都用于反映UI的变化，不应有多余状态。

state来自内部状态，是组件对象最重要的属性，其值是对象，可以包含多个数据
	可以通过更新组件的state来更新对应的页面显示(重新进行组件渲染），不必操作DOM
	当页面发生变化时，用state来记录页面变化
什么样的变量..

			
		

	





	

		

			

				
					
react学习笔记

				
			

			

				

					zhaoyin1994的博客
				

				

					08-02
					
					332
					
				

			

		

		

			
				
如果项目中使用的不是less和sass，使用css则需要做样式的模块化，样式命名采用import hello='./xx/xx.modules.css的方式,对样式进行模块化处理，防止不同模块之间样式覆盖问题。:react代码在网页跑起来显示的图标是这种颜色的，一般是没有经过打包的，打包部署后应该是正常的react图标icon颜色。2.发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法。类中的构造器不是必须写的，要对实例进行一些初始化的操作，如添加指定属性时才写。

			
		

	





	

		

			

				
					
react实战笔记44:state得注意事项2

				
			

			

				

					qq_41632427的博客
				

				

					10-19
					
					75
					
				

			

		

		

			
				
前端

			
		

	





	

		

			

				
					
react学习笔记之setState方法注意事项

				
			

			

				

					jqshashou的博客
				

				

					06-17
					
					5241
					
				

			

		

		

			
				
首先我们知道，setState方法用于更新当前组件的state状态值，但调用这个方法后，state并不会立即更新，而是在render方法调用后才会更新，React这么设计的思想是render方法执行时，对state进行批量转变有利于DOM渲染更快。
换句话说，setState方法是异步操作的，并不会阻塞下面的代码执行。
看个例子：

constructor() {
super()
th

			
		

	





	

		

			

				
					
React学习笔记7：React使用注意事项

				
			

			

				

					HTZW的博客
				

				

					02-19
					
					759
					
				

			

		

		

			
				
1. setState
setState更新状态的2种写法
方式一：setState(stateChange, [callback])------对象式的setState

stateChange为状态改变对象(该对象可以体现出状态的更改)
callback是可选的回调函数, 它在状态更新完毕、界面也更新后(render调用后)才被调用

方式二：setState(updater, [callback])------函数式的setState

updater为返回stateChange对象的函数
updat

			
		

	





	

		

			

				
					
react学习笔记之state以及setState的使用

				
			

			

				

					08-28
				

			

		

		

			
				
下面我们将详细介绍 State 和 setState 的使用、工作原理、更新机制、注意事项等。  什么是 State  在 React 中，State 是一个对象，用来存储组件的数据状态。State 是 React 中组件的一个对象，React 把用户界面...

			
		

	





	

		

			

				
					
React学习笔记之高阶组件应用

				
			

			

				

					08-27
				

			

		

		

			
				
### 注意事项  - 静态方法不会自动传递，需要手动复制。 - refs无法直接传递，需要特殊处理以获取组件实例。 - 遵循无副作用原则，不要在HOC内部修改组件的状态或触发副作用。 - 不要在`render`方法内部创建或使用...

			
		

	





	

		

			

				
					
React学习笔记--进阶之路

				
			

			

				

					JackieDYH的博客
				

				

					08-12
					
					618
					
				

			

		

		

			
				
react框架 *


react是facebook内部的一个javascript类库，用于构建用户界面的 JavaScript 库
react官网：https://react.docschina.org/
react不是一个完整的MVC框架，最多可以认为是MVC中的V（View）
react引入了虚拟DOM机制
react引入了组件化思想
react使用facebook专门为其开发的一套语法糖--jsx


使用注意事项-jsx语法


注意事项 jsx语法
* 标签内容内属性 例如
*         

			
		

	





	

		

			

				
					
尚硅谷-react教程-求和案例-@redux-devtools/extension 开发者工具使用-笔记

				
			

			

				

					呵呵哒!的博客
				

				

					10-26
					
					531
					
				

			

		

		

			
				
安装和使用 Redux DevTools 插件-CSDN博客。

			
		

	





	

		

			

				
					
尚硅谷-react教程-求和案例-异步action版-笔记

				
			

			

				

					呵呵哒!的博客
				

				

					10-26
					
					575
					
				

			

		

		

			
				
(4).备注：异步action不是必须要写的，完全可以自己等待异步任务的结果了再去分发同步action。2).创建action的函数不再返回一般对象，而是一个函数，该函数中写异步任务。(2).何时需要异步action：想要对状态进行操作，但是具体A的数据靠异步任务返回。1).yarn add redux-thunk,并配置在store中。3).异步任务有结果后，分发一个同步的action去真正操作数据。(1).明确：延迟的动作不想交给组件自身，想交给actionA。

			
		

	





	

		

			

				
					
React 所有的 hooks 方法，以及用法

				
			

			

				

					Rverdoser的博客
				

				

					10-31
					
					278
					
				

			

		

		

			
				
Hello

			
		

	





	

		

			

				
					
echarts-for-react和echarts连用实现地图下钻，上钻以及图层

					
最新发布

				
			

			

				

					weixin_43925630的博客
				

				

					10-31
					
					143
					
				

			

		

		

			
				
echarts-for-react和echarts连用实现地图下钻，上钻以及图层

			
		

	





	

		

			

				
					
vue3-ref 和 reactive

				
			

			

				

					m0_51244077的博客
				

				

					10-30
					
					873
					
				

			

		

		

			
				
vue3-ref 和 reactive

			
		

	





	

		

			

				
					
【React系列五】—React学习历程的分享

				
			

			

				

					m0_60623820的博客
				

				

					10-28
					
					987
					
				

			

		

		

			
				
介绍React的React—v5（旧版路由）的使用

			
		

	





	

		

			

				
					
React 异步渲染机制

				
			

			

				

					u010194271的博客
				

				

					10-31
					
					303
					
				

			

		

		

			
				
react 官网渲染讲解：
https://zh-hans.react.dev/learn/render-and-commitReact 将状态更新标记为需要更新，但并不会立即执行。这是为了优化性能，通过批量处理状态更新和减少渲染次数来提升应用的响应速度。当你调用 setVisible 时，React 并不会立刻更新状态并重新渲染组件。相反，React 会将状态更新放入一个队列中，并在下一个事件循环（即下一次渲染周期）中处理这些更新。这意味着，在调用 setVisible 后，当前组件的渲染仍然会使用旧的状

			
		

	





	

		

			

				
					
React-Redux源码二次开发学习笔记

				
			

			

				

					
				

			

		

		

			
				
"Redux学习笔记，作者newtwg@qq.com，最后修改于2020.02.20，内容涉及React、Redux、Flux等关键词，是作者学习过程的记录，旨在帮助他人快速入门React-Redux开发。"  Redux是JavaScript应用的状态管理库，尤其常用于...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
前端大歌谣

			
你的鼓励将是我创作的最大动力

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

			
您的余额不足，请更换扫码支付或充值

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值