react-redux 源码解读体会拾遗

5 篇文章 0 订阅
5 篇文章 0 订阅

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})
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值