react中的高阶组件理解与使用

一、什么是高阶组件?

 其实就是一个函数,参数是一个组件,经过这个函数的处理返回一个功能增加的组件。

二、代码中如何使用

1,高级组件headerHoc

react中的高阶组件理解与使用_第1张图片

 

2,在普通组件header中引入高阶组件并导出高阶组件,参数是普通组件

react中的高阶组件理解与使用_第2张图片

 3、在页面中使用

react中的高阶组件理解与使用_第3张图片

4、页面效果

react中的高阶组件理解与使用_第4张图片 

 三、高阶组件的作用

1、属性代理

react中的高阶组件理解与使用_第5张图片

react中的高阶组件理解与使用_第6张图片 

react中的高阶组件理解与使用_第7张图片 

传多个参数的用法如下

react中的高阶组件理解与使用_第8张图片 react中的高阶组件理解与使用_第9张图片

react中的高阶组件理解与使用_第10张图片 

2,渲染劫持(根据条件判断渲染数据)

react中的高阶组件理解与使用_第11张图片

react中的高阶组件理解与使用_第12张图片 react中的高阶组件理解与使用_第13张图片

以上就是高阶组件的理解与使用。 

 

 

 

你可能感兴趣的:(react,react.js,前端,前端框架)