【REACT NATIVE 系列教程之四】刷新组件RENDER(重新渲染)的三种方式详解

最新推荐文章于 2025-07-18 20:00:00 发布

李华明Himi

最新推荐文章于 2025-07-18 20:00:00 发布

阅读量3.8w

点赞数

CC 4.0 BY-SA版权

分类专栏：【React Native 跨平台应用开发】文章标签： react native render 刷新 himi

本文链接：https://blog.youkuaiyun.com/xiaominghimi/article/details/51397192

本文介绍了React Native中组件渲染的三种方式：通过this.setState()、this.forceUpdate()和this.setProps()实现组件的刷新。讲解了它们的使用场景、优缺点及注意事项，强调setState()是常规更新UI的主要方法，forceUpdate()应尽量避免，而setProps()只适用于根组件。

本站文章均为李华明Himi 原创,转载务必在明显处注明：
转载自【黑米GameDev街区】原文链接: http://www.himigame.com/react-native/2242.html

width="150" height="210" frameborder="0" scrolling="no" src="http://widget.weibo.com/relationship/bulkfollow.php?language=zh_cn&uids=1916000601&wide=1&color=FFFFFF,FFFFFF,0082CB,666666&showtitle=0&showinfo=1&sense=0&verified=1&count=1&refer=http%3A%2F%2Fwww.himigame.com%2Freact-native%2F2242.html&dpc=1" style="margin: 0px; padding: 0px; border-width: 0px; font-family: inherit;font-size:undefined; font-style: inherit; font-variant-caps: inherit; line-height: inherit; max-width: 100%;">

开发过游戏的都应该很清楚，“刷屏”是多么的重要。其实开发应用也如此，当组件的数据被修改后，如何及时更新组件呈现出最新的数据与效果一样至关重要。

那么这里Himi大概讲三种常用的方式：

this.setState() 【最为常用】

这是在事件处理函数中和请求回调函数中触发 UI 更新的主要方法。

一般情况下setState() 总是触发一次重绘，除非在 shouldComponentUpdate() 中实现了条件渲染逻辑。如果使用可变的对象，但是又不能在 shouldComponentUpdate() 中实现这种逻辑，仅在新 state 和之前的 state 存在差异的时候调用 setState() 可以避免不必要的重新渲染。

举例、代码段如下：

 
          1 
        
          2 
        
          3 
        
          4 
        
          5 
        
          6 
        
          7 
        
          8 
        
          9 
        
          10 
        
          11 
        
          12 
        
          13 
        
          14 
        
          15 
        
          16 
        
          17 
        
          18 
        
          19 
        
          20 
        
          21 
        
          22 
        
          23 
        
          24 
        
          25 
        
          26 
        
         constructor 
         ( 
         props 
         ) 
           
         { 
           
         super 
         ( 
         props 
         ) 
         ; 
        
         this 
         . 
         state 
           
         = 
           
         { 
           
         myName 
         : 
         'I am MyName!' 
         , 
        
         } 
         ; 
        
         } 
        
         testFun