render 函数中,将被包裹组件渲染出来,除了高阶组件自己要做的工作,其余功能全都转手给了被包裹的组件
应用场景
应用 1-操做 props
高阶组件能够改变被包裹组件的props,可以对props...进行任何操做,甚至可以在高阶组件上自定义事件,然后通过 props 传递下去 如下 ComponentB 组件
import React, { Component } from 'react';
import...中拿不到App.js中传递过来的 name 和 site 属性,原因是,我们属性传递到高阶组件componentA里面,但是我们componentA组件没有把属性传给被包裹组件,这就导致被包裹的componentB...);
}
}
export default ComponentB;
通过以上操作在 componentB 中就能够拿到 ref 的属性了的
应用 3-抽取状态
假如我们的高阶组件包裹的都有同工的一个方法...这样,我们就在高阶组件中把公共的状态给抽离出来了的,提高代码的复用性,相当于是把各个组件的状态放到公共组件管理了的
然后通过 props 的方式传给了各个组件
包装组件
所谓包装组件就是添加一些列的标签