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

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

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

那么这里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={this.testFun.bind(this)}  

          >

            <Image

            source={require('./res/himi.png')}

            style={{width: 70, height: 70}}

            />

        </TouchableHighlight>

        

        <TouchableHighlight

          underlayColor='#4169e1'

          onPress={this.testForceFun.bind(this)}  

          >

            <Image

            source={require('./res/himi.png')}

            style={{width: 40, height: 40}}

            />

        </TouchableHighlight>

       ......

改动说明:

a)  修改 testFun 函数,让其作用只是修改了 myName 的值,并没有setState!所以不重绘

b)  添加 testForceFun 函数,作用是调用强制重绘函数。

c) render中多加了一个按钮,来触发 testForceFun函数。

运行效果图如下:(注意  testForceFun 函数对应的是图片较小的那个哦~ )

 

通过示意图可以知道,Himi 调用了 testFun、接着调用testForceFun ,才能看到刷新。

 

         3. this.setProps()   【不常用】

同一个节点上再次调用 React.render() 来更新根组件是首选的方式,也可以调用 setProps() 来改变组件的属性,触发一次重新渲染。

但是!此方法仅在根组件上面调用。也就是说,仅在直接传给 React.render() 的组件上可用,在它的子级组件上不可用。如果你倾向于在子组件上使用 setProps(),不要利用响应式更新,而是当子组件在 render() 中创建的时候传入新的 prop 到子组件中。

说的通俗一点:父组件不能直接修改 prop属性,只能父类在使用传入的时候进行设置。

你可能感兴趣的:(【REACT NATIVE 系列教程之四】刷新组件RENDER(重新渲染)的三种方式详解)