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.jb51.cc/react/305104.html