代理方式的高阶组件

  • 如果高阶组件要做的功能不涉及除了render之外的生命周期函数,也不需要维护自己的状态,那也可以干脆返回一个纯函数
    在这里插入图片描述
    在这里插入图片描述

应用

操纵prop

在这里插入图片描述
在这里插入图片描述

访问ref
  • 访问ref并不是值得推荐的React组件使用方式
  • 当linkRef被调用时就得到了被包裹组件的DOM实例,记录在this._root中
    在这里插入图片描述
  • 说它非常有用,是因为只要获得了对被包裹组件的ref引用,那它基本上就无所不能,因为通过这个引用可以任意操纵一个组件的DOM元素。说它没什么用,是因为ref的使用非常容易出问题,我们已经知道最好能用“控制中的组件”(Controlled Component)来代替ref
抽取状态
  • 在傻瓜组件和容器组件的关系中,通常让傻瓜组件不要管理自己的状态,只要做一个无状态的组件就好,所有状态的管理都交给外面的容器组件,这个模式就是“抽取状态”
  • 简易版的connect高阶组件
    返回的React组件类预期能够访问一个叫store的context值,在react-redux中,这个context由Provider提供,在组件中我们通过this.context.store就可以访问到Provider提供的store实例
    在这里插入图片描述
    HOCComponent组件需要一系列的成员函数来维持内部状态和store的同步
    在这里插入图片描述
    HOCComponent的render函数
    在这里插入图片描述
    注意,这里我们实现的并不是完整的connect实现逻辑。比如,没有实现should-ComponentUpdate函数,缺少shouldComponentUpdate会导致每次Store状态变化都走一遍完整的更新过程
包装组件
  • render函数的JSX中完全可以引入其他的元素,甚至可以组合多个React组件
    在这里插入图片描述
    在这里插入图片描述
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值