React组件的State
在ES6
中,可以使用this.{属性名}
定义一个class
的属性,也可以说属性是直接挂载到this
下的变量。因此,state
、props
实际上也是组件的属性,只不过它们是React
为我们在Component class
中预定义好的属性。除了state
、props
以外的其他组件属性称为组件的普通属性。
比如,组件中需要一个定时器来自动更新显示时间时,我们都会需要一个timerId
来保存该定时器,已在需要的能够清除它。这就是一个普通的属性,因为它和组件要渲染的内容没有直接关系。
因此,当我们在组件中需要用到一个变量,并且它与组件的渲染无关时,就应该把这个变量定义为组件的普通属性,直接挂载到this
下,而不是作为组件的state
。或者更直观的判断是,看组件render方法中是否使用到了这个变量,如果没有,它就是一个普通属性
。
state vs props
state
和props
又有什么区别呢?
state
和props
都直接和组件的 UI 渲染有关,它们的变化都会触发组件重新渲染,但props
对于使用它的组件来说是只读的,是通过父组件传递过来的,要想修改props
,只能在父组件中修改;而state
是组件内部自己维护的状态,是可变的。
其实区分state
和props
的关键就是,‘控制权’是在组件自身,还是由其父组件来控制的。
state 的判断依据
(1)这个变量是否通过props
从父组件中获取?如果是,那么它不是一个状态。
(2)这个变量是否在组件的整个生命周期中都保持不变?如果是,那么它不是一个状态。
(3)这个变量是否可以通过其他状态(state)
或者属性(props)
计算得到?如果是,那么它不是一个状态。
(4)这个变量是否在组件的render
方法中使用?如果不是,那么它不是一个状态。这种情况下,这个变量更适合定义为组件的一个普通属性。
state 的修改
1、state 不能直接进行修改
直接赋值形式修改 state,不会触发组件的 render。修改state
需要通过setState
方法进行修改。
1 |
|
2、state 的更新是异步的
调用setState
时,组件的state
并不会立即改变,setState
只是把要修改的状态放入一个队列中,React
会优化真正的执行时机,并且出于性能原因,可能会将多次setState
的状态修改合并成一次状态修改。
所以不要依赖当前的state
,计算下一个state
。当真正执行状态修改时,依赖的this.state
并不能保证是最新的state
,因为React
会把多次state
的修改合并成一次,这时this.state
还是这几次state
修改前的state
。
另外,需要注意的是,同样不能依赖当前的props
计算下一个状态,因为props
的更新也是异步的。
如,电商类购物车添加购买数量时,如果连续点击两次,就会连续调用两次this.setState({count: this.state.count + 1})
,在React
合并多次修改为一次的情况下,相当于等价执行了下面的操作:
1 |
|
于是,最终只会增加一次操作的值。
如果有这样的需求,可以使用另一个接收一个函数作为参数的setState
,这个函数有两个参数,第一个是当前最新状态(本次组件状态修改生效后的状态)的前一个状态preState
(本次组件状态修改前的状态),第二个参数是当前最新的属性props
。代码如下:
1 |
|
3、state 更新是一个合并的过程
我们在每次调用setState
修改 state 时,并不是需要把所有的值都进行修改,而只是设置我们要修改的部分值。React
会合并新值导员的组件state
中,同时保留没有发生变化的原来的state
的值。
state 与不可变对象
React
官方建议把state
当作不可变对象,一方面,直接修改this.state
,组件并不会重新render
;另一方面,state
中包含的所有状态都应该是不可变对象。当state
中的某个状态发生变化时,应该重新创建这个状态对象,而不是直接修改原来的状态。
可以分为下面三种情况:
1.状态的类型是不可变类型(数字、字符串、布尔值、null、undefined)
1 |
|
2.状态的类型是数组
1 |
|
当从数组中截取部分元素作为新的状态时,可使用数组的slice
方法:
1 |
|
当从数组中过滤部分元素作为新的状态时,可使用数组的filter
方法:
1 |
|
注意,不要使用
push、pop、shift、unshift、splice
等方法修改数组类型的状态,因为这些方法都是在原数组的基础上修改的,而concat、slice、filter
会返回一个新的数组。
3.状态的类型是普通对象(不包含字符串、数组)
(1)使用ES6
的Object.assgin
方法:
1 |
|
(2)使用对象扩展语法(object spread properties):
1 |
|
总结一下,创建新的状态对象的关键是,避免使用会直接修改原对象的方法,而是使用可以返回一个新对象的方法。当然,也可以使用一些Immutable
的 JS 库(如Immutable.js
)实现类似的效果。
为什么React
推荐组件的状态是不可变对象呢?一方面是因为对不可变对象的修改会返回一个新对象,不需要担心原有对象在不小心的情况下被修改导致的错误,方便程序的管理和调试;另一方面是出于性能考虑,当对象组件状态都是不可变对象时,在组件的shouldComponentUpdate
方法中仅需要比较前后两次状态对象的引用就可以判断状态是否真的改变,从而避免不必要的render
调用。
- 本文作者:冷星
- 本文链接:http://lengxing.club/2018/12/21/React%E7%BB%84%E4%BB%B6%E7%9A%84State/index.html
- 版权声明:本博客所有文章均采用 BY-NC-SA 许可协议,转载请注明出处!