ReactNative之state基础用法+究极体验

注：本教程针对于有过React/ReactNative开发经验的人群。

本篇文章将对state做一个究极探究。

知识点前瞻：

1.state使用、React事务（transaction）、setState机制、render刷新机制。

一：基本用法。

1.初始化state。

方式一：直接初始化（不推荐）

在class里可以直接初始化state（不推荐）

方式二：在构造函数中初始化（推荐）

constructor ( props ) {

super ( props ) ;

//设置状态

this . state = {

text : ' 123 ',

}

}

2.使用

this.state.xxx

3.改变

this . setState ( {

text : ' 456 '

} )

二：调皮的用法。setState机制讲解。

因为原理的话只可意会不可言传这里对于原理的讲解就由大家在以后的学习过程中慢慢体会。

为了阅读体验，示例只截取部分代码。

首先初始化一个state，起个名字叫text并设初始值为‘123’

constructor ( props ) {

super ( props ) ;

//设置状态

this . state = {

text : ' 123 ',

}

}

举的第一个栗子：

//方法一，始终是执行完下面的代码再更新state再执行render

this . setState ( {

text : ' 456 '

} )

for ( let i = 0 ; i < 1000 ; i ++ ) {

console . log ( ' 方法一：state值= '+ this . state . text ) ;

}

执行结果：

先输出了1000次上一次的值。然后再更改的state，再运行的render。

我尝试着循环打印了1000000次log。结果就是模拟器卡了小10分钟，但依旧是先输出了1000次上一次的值。然后再更改的state，再运行的render。

举的第二个栗子：

//方法二：先执行了setState和render再执行下面的代码

let me = this ;

setTimeout ( function (){

me . setState ( {

text : ' 456 '

} )

console . log ( ' 异步，text= '+ me . state . text ) ;

}, 0 ) ;

执行结果：

先执行了异步中的setState和render。再输出了更改后的值。

举的第三个栗子：

//方法三：不管for多少遍state赋值操作，render只执行了一次

for ( let i = 0 ; i < 1000 ; i ++ ) {

this . setState ( {

text : ' 456 '

} )

console . log ( ' 执行更新state ' ) ;

}

执行结果：

尽管运行了1000遍setState，但render却只执行了一次，说明setState这个方法真的很智能。不会傻傻的刷新一千遍render，只会选择性的进行刷新。

每个例子都用同样的render代码：

render () {

console . log ( ' 更新了render ' ) ;

return ( ......

总结：

1.在主线程中，也就是直接写的代码，跟在setState之后的代码，是只能拿到setState之前的值的。

2.在异步中，因为线程存在事务，所以跟在setState之后的代码，可以拿到setState之后的值。但是因为事务的原因，是在执行完render之后才拿到的值。

3.无论for多少遍setState，render只执行该执行的那一次。重复执行setState只会引起render执行一次。