共计 2917 个字符,预计需要花费 8 分钟才能阅读完成。
什么是 computed
计算属性?它会依据所依赖的数据动态显示新的计算结果, 该计算结果会被缓存起来。如果是 Vue 开发者,对这个性能并不生疏,而且很罕用。对于 React 开发者,如果用过 mobx,那其实也不生疏,一个装璜器就失效了🐮。那如果是 Redux 呢??(缄默中。。。)有了,reselect
嘛,哈哈😄。啪,骗子,这是 假的 计算属性,它要手动提供全副依赖,每个依赖都是一个函数回调确定依赖值,每次写这么多代码是有多想敲坏我的机械键盘(嘶吼)。
这么说,redux 和计算属性无缘?也不能这么说,方法总比艰难多。尽管 redux 是单向数据流,无奈做响应式操作,不过,咱们能够发明出一个监听对象
import {Store} from 'redux'; | |
const collector = []; | |
class ObjectDeps {protected readonly deps: string[]; | |
protected readonly name: string; | |
protected readonly store: Store; | |
protected snapshot: any; | |
constructor(store: Store, name: string, deps: string[] = []) { | |
this.store = store; | |
this.name = name; | |
this.deps = deps; | |
collector.push(this); | |
} | |
proxy(currentState) {if (state === null || typeof state != 'object') return state; | |
const proxyData = Array.isArray(state) : [] : {}; | |
const currentDeps = this.deps.slice(); | |
const keys = Object.keys(currentState); | |
for (let i = keys.length; i-- > 0;) {const key = keys[i]!; | |
Object.defineProperty(proxyData, key, { | |
enumerable: true, | |
get: () => {if (visited) { | |
return new ObjectDeps( | |
this.store, | |
this.name, | |
currentDeps.slice(),).proxy(currentState)[key]; | |
} | |
visited = true; | |
this.deps.push(key); | |
return this.proxy((this.snapshot = currentState[key])); | |
}, | |
}); | |
} | |
} | |
} |
朴实无华,没有基于 ES6 的 Proxy
,因为兼容性不好。既然是前端的利用,天然是要关照到 ES5 的环境的,因而抉择defineProerty
是个不错的计划。
有了监听驱动,那监听岂不是大海捞针?
// 假如 user 里的对象为:{firstName: 'lady', lastName: 'gaga'} | |
const userState = store.getState()['user']; | |
function computedFullName() {const proxy = new ObjectDeps(store, 'user').proxy(userState); | |
return proxy.firstName + '-' + proxy.lastName; | |
} | |
const fullname = computedFullName(); |
当初咱们看看 collector
里收集到多少个依赖
console.log(collector); // [ObjectDeps, ObjectDeps]
不错,两条依赖,第一条的 deps 链为['user', 'firstName']
,第二条为['user', 'lastName']
。
原理剖析:
- 每次创立 proxy 时,构造函数均会执行
collector.push(this)
向采集器退出本人。 - proxy 拜访 firstName 时,其实拜访的是 getter,getter 中有一条
this.deps.push(key)
立刻收集依赖,并返回下一级的 proxy 值。以此类推,即便是proxy.a.b.c.d
这种深度操作也来者不拒,因为每次拜访下一级都能收集依赖并合并到 deps 数组中。 - proxy 拜访 lastName 时,因为 proxy 实例其实曾经被 firstName 占用了(通过 visited 变量判断),所以 getter 逻辑中会间接返回一个
新的 ObjectDeps
实例,此时 lastName 曾经和咱们看到的 proxy 变量没有任何关系了。
主动收集依赖曾经实现了,咱们试一下如何缓存属性
class ObjectDeps { | |
protected snapshot: any; | |
proxy() {...} | |
isDirty() {return this.snapshot !== this.getSnapshot(); | |
} | |
protected getSnapshot() { | |
const deps = this.deps; | |
let snapshot = this.store.getState(); | |
for (let i = 0; i < deps.length; ++i) {if (snapshot == null || typeof snapshot !== 'object') {break;} | |
snapshot = snapshot[deps[i]!]; | |
} | |
return snapshot; | |
} | |
} |
通过 isDirty()
的判断,即再次取得 deps 下的最新值和旧值做比照,便能够晓得这个依赖是否为 脏值
。这一步便是缓存的要害。
当初你置信 reselect 是骗子了吧,明明能够主动依赖,非要多写几行代码减少心智累赘?托付,不是每个人都须要 KPI 压力的。
老师,我想间接在我的项目中应用上这个什么 computed 属性,应该去哪里找现成的呢?废话,当然是去山东找蓝翔。看看蓝翔大法:
import {defineModel, useComputed} from 'foca'; | |
export const userModel = defineModel('user', { | |
initialState: { | |
firstName: 'lady', | |
lastName: 'gaga', | |
}, | |
computed: { | |
// 清新 | |
fullName() {return this.state.firstName + '-' + this.state.lastName;}, | |
}, | |
}); | |
// App.tsx | |
const App: FC = () => {const fullName = useComputed(userModel.fullName); | |
return <div>{fullName}</div>; | |
}; |
嗯?刚刚产生了什么,如同看到 dva 飞过去?飞你个头,是哥写的 React 状态治理库foca
,基于 redux 和 react-redux,方才的 computed 解析就是从外面摘抄的(具体实现逻辑请看这里)。尽管是个软广告,不过redux 也算是反对 computed 了
,各位大佬就不要天天喷 redux 这个不好那个不好了行吧😠,二次封装才是真爱。
人生苦短,手握神器,少写代码,早点上班最要紧:https://github.com/foca-js/foca