众所周知, redux的三项原则之一有 state is read-only, 即immutable. 为了保证immutable, 所以每次reducer都要return一个new object, 作为新的state. 但为什么state一定要是immutable呢? 换言之, 为什么不能直接修改original state呢?
今天搜了半天中文社区, 搜出的都是似是而非的回答. 直到看到了一个老外的文章.
大体意思是: 为了高效地让redux知道, state已发生变化。
1. 必须知道state、props已发生变化。(毕竟在使用connect时代, store的state是以props传入component的)
- 否则,component 就不会 re-render 去反映最新的数据变化
- 只有redux知道state发生变化, 才通知所有订阅了
store
的组件重新渲染.
2. 判断state是否发生变化, 最准确的方式当然是deep comparison, 但其时间复杂度是O(n3), 所以事实上不可行
3. 所以只好shallow comparison, 即
1)首先,比较新旧两个state
的 reference 是否相同,即newState === oldState
。如果相同,说明state
没有发生变化,无需进行后续操作,直接返回旧的state
对象;
2)如果新旧state
的 memory address 不同,进一步比较新旧两个state
的每一个属性是否相同,具体比较方式如下:
- 对于基本类型的属性,如
string
、number
、boolean
等,store
会比较它们的 value 是否相同,即newState.property === oldState.property
; -
对于引用类型的属性,如
object
、array、function
等,store
会比较它们的引用是否相同,即newState.property === oldState.property
;
3)如果新旧state
对象的所有属性都相同,则说明state
没有发生变化,无需进行后续操作,直接返回旧的state
对象;
4)如果新旧state
对象的某一个属性不同,则说明state
发生了变化,此时store
会返回新的state
对象,并通知所有订阅了store
的组件重新渲染。
4. 基于3.1,所以必须返回一个全新的state。否则,即如果新旧两个state的reference相同, 则直接会被包括redux在内的各种shallow comparison规则判定为未发生变化, 从而造成 component 该 re-render 而不 re-render。
附上老外链接: https://supertokens.com/blog/why-is-redux-state-immutable
标签:发生变化,immutable,state,新旧,redux,Why,store From: https://www.cnblogs.com/mayingdts/p/17254541.html