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

Posted 2022-05-30 李华明Himi

本站文章均为  李华明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大概讲三种常用的方式：

1. 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 ( )      this . setState ( myName : '组件被刷新了' ) ;     render ( )          . . . . . .          < TouchableHighlight            underlayColor = '#4169e1'            onPress = this . testFun . bind ( this )               >              < Image              source = require ( './res/himi.png' )              style = width : 70 , height : 70              / >          < / TouchableHighlight >          . . . . . .    )

1. 在this.state中添加了一个 字符串变量 myName 用于Text 组件的文字显示

2. 自定义了一个 testFun 函数，用于 Touchable的回调处理，其中调用了this.setState 函数并修改了myName的数据

3. 在render中添加了一个高亮触摸组件，用于演示效果。

【注】假如有 a、b、c三个组件，b 是 a 的子组件，c是 b 的子组件，那么 b 中 setState 之后，b 和 c 会 rerender，而 a 不会。 因此建议大家可以把每个组件提供一个重绘接口，然后提供给其他组件调用。

效果如下：（点击查看动态效果）

 

2.  this.forceUpdate() 【较为常用，但是不推荐】

如果 render() 方法从 this.props 或者 this.state 之外的地方读取数据，你需要通过调用 forceUpdate() 告诉 React 什么时候需要再次运行 render()。如果直接改变了 this.state，也需要调用 forceUpdate()。

调用 forceUpdate() 将会导致 render() 方法在相应的组件上被调用，并且子级组件也会调用自己的 render()，但是如果标记改变了，那么 React 仅会更新 DOM。通常情况下，应该尽量避免所有使用 forceUpdate() 的情况，在 render() 中仅从 this.props 和 this.state 中读取数据。这会使应用大大简化，并且更加高效。

举例、在上面的示例代码基础上修改，如下：

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 27 28 29 30

testFun ( )      this . state . myName = '组件被刷新了' ;       testForceFun ( )      this . forceUpdate ( ) ;      render ( )          . . . . . .          < TouchableHighlight            underlayColor = '#4169e1'            onPress = REACT NATIVE 系列教程之二创建自定义组件&&导入与使用示例 REACT NATIVE 系列教程之六重写SHOULDCOMPONENTUPDATE指定组件是否进行重绘 REACT NATIVE 系列教程之七统一ANDROID与IOS两个平台的程序入口&&区分平台的组件简介 REACT NATIVE 系列教程之一触摸事件的两种形式与四种TOUCHABLE组件详解 REACT NATIVE 系列教程之十三利用LISTVIEW与TEXTINPUT制作聊天/对话框&&获取组件实例常用的两种方式 REACT NATIVE 系列教程之十三利用LISTVIEW与TEXTINPUT制作聊天/对话框&&获取组件实例常用的两种方式