1.测试一
运行结果:
2.测试二
运行显示:
点击按钮前:
点击按钮后,结果如下:
结论:state发生改变,render执行一次
3.测试三
从测试二中可以知道,执行顺序为:1构造函数,2挂载前函数,3渲染函数,4.挂载函数。如果有state状态改变,那么再次渲染函数执行。
再看下面例子:
运行结果:
4.测试四
结论:说明只要在 render 函数后改变状态,render就会被执行
5.测试五
6.研讨shouldComponentUpdate函数
对react-nativeComponent组件的shouldComponentUpdate函数进行研究
shouldComponentUpdate函数有两个参数:nextProps,nextState ,分别是
下一次运行时的props和state,返回一个布尔值。写法如下:
shouldComponentUpdate(nextProps,nextState){
return true;
}
return true;
}
可以不带参数
shouldComponentUpdate(){
return true;
}
return true;
}
研究的问题
1.什么时候执行该函数?
2.返回true的话会怎么样?
3.返回false又会怎么样?
针对第一个问题,写了先得代码:
首次运行会看到:
后台会输出:
按下
“改变Component状态”按钮,就会看到输出:
我们通过按钮改变了state状态,没按下按钮,shouldComponentUpdate就会执行。是不是这样的,我们可以去掉_onPress函数中的改变state的代码,然后再按按钮,发现shouldComponentUpdate不再执行,从此得出结论是:
state改变,shouldComponentUpdate执行,且在初始化
render
时不会执行。
对于shouldComponentUpdate的探究,我们的入手是他的两个参数,竟然改变state参数能让shouldComponentUpdate执行,那么改变props参数呢?
props参数是有调用该组件的对象或者标签传进来的值,传进来的值都存在props对象里。不过为了方便,我们只再自身内定义props。代码如下: