- 如果高阶组件要做的功能不涉及除了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组件