react native Component 生命周期

前端之家收集整理的这篇文章主要介绍了react native Component 生命周期前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

1.测试一

运行结果:

2.测试二


运行显示

点击按钮前:

点击按钮后,结果如下:

结论:state发生改变,render执行一次

3.测试三

从测试二中可以知道,执行顺序为:1构造函数,2挂载前函数,3渲染函数,4.挂载函数。如果有state状态改变,那么再次渲染函数执行。
再看下面例子:
运行结果:

4.测试四
运行结果:

结论:说明只要在 render 函数后改变状态,render就会被执行

5.测试五

每次点击按钮都会执行render函数,结果如下:


6.研讨shouldComponentUpdate函数

对react-nativeComponent组件的shouldComponentUpdate函数进行研究
shouldComponentUpdate函数有两个参数:nextProps,nextState ,分别是 下一次运行时的props和state,返回一个布尔值。写法如下:
shouldComponentUpdate(nextProps,nextState){
return true;
}
可以不带参数
shouldComponentUpdate(){
return true;
}

研究的问题

1.什么时候执行该函数
2.返回true的话会怎么样?
3.返回false又会怎么样?

针对第一个问题,写了先得代码

首次运行会看到:

后台输出

按下 “改变Component状态”按钮,就会看到输出

我们通过按钮改变了state状态,没按下按钮,shouldComponentUpdate就会执行。是不是这样的,我们可以去掉_onPress函数中的改变state的代码,然后再按按钮,发现shouldComponentUpdate不再执行,从此得出结论是: state改变,shouldComponentUpdate执行,且在初始化render时不会执行。
对于shouldComponentUpdate的探究,我们的入手是他的两个参数,竟然改变state参数能让shouldComponentUpdate执行,那么改变props参数呢?
props参数是有调用该组件的对象或者标签传进来的值,传进来的值都存在props对象里。不过为了方便,我们只再自身内定义props。代码如下:
原文链接:https://www.f2er.com/react/305104.html

猜你在找的React相关文章