react-connect源码体会最深的还是将闭包应用到极致,而且很多都是多级闭包。核心代码selectorFactory.js都是闭包写法。
源码中,闭包的设计大多是为了传值方便和功能模块化。
另外还有其他印象深刻的:
以这中方式定义 组件生命周期函数 componentWillUpdate
Connect.prototype.componentWillUpdate = function componentWillUpdate() {}
//这种函数内返回执行的函数很妙,其实就是外层等于内层函数,不过这种写法可以增加判断,到底使用哪个函数
return function pureFinalPropsSelector(nextState, nextOwnProps) {
return hasRunAtLeastOnce
? handleSubsequentCalls(nextState, nextOwnProps)
: handleFirstCall(nextState, nextOwnProps)
}
//妙处在于,proxy() 第一次执行执行的是三目运算符的true部分,以后每次都是执行false部分。
const proxy = function mapToPropsProxy(stateOrDispatch, ownProps) {
return proxy.dependsOnOwnProps
? proxy.mapToProps(stateOrDispatch, ownProps)
: proxy.mapToProps(stateOrDispatch)
}
proxy.dependsOnOwnProps = true
proxy.mapToProps = function detectFactoryAndVerify(stateOrDispatch, ownProps) {
proxy.mapToProps = mapToProps
proxy.dependsOnOwnProps = false
let props = proxy(stateOrDispatch, ownProps)
return props
}
//这是boundActionCreators源码的一处妙用
apply与arguments 母函数通过arguments操作子函数
1、母函数通过arguments操作子函数;
2、必须使用tt.apply
3、直接使用tt(arguments)是错误的
4、apply配合arguments使用可以达到传参一致的效果。
function tt(x,y) {
console.log(x);//1
console.log(y);//3
}
function dd() {
//tt(arguments) 错误
tt.apply(this,arguments)
}
dd(1,3)
巧妙函数写法和传参数方法:
//传参中后面的={}写得妙,没有那个,这样调用connect(1)就会报错,ab undefined,
function connect(u,{ab=9,...op}={}) {
console.log(u);//1
console.log(ab);//2
console.log(op);//{ cd: 99, er: 123 }
}
connect(1,{ab:2,cd:99,er:123})