本质:高阶组件本质上就是一个函数。对只有一层的高阶组件,它是纯函数,并且入参是UI组件,返回一个新的React组件。
意义:高阶组件是React中逻辑复用的一种高级技巧。
高阶组件的标准语法:fn(UI组件)(return props=>(<UI组件 {...props} />))
备注:{...props} 属性继承,在封装高阶时一定要添加属性继承。
这个高阶组件(高阶函数)就是纯函数,接收一个UI组件,返回一个新的React组件。
WrappedComponent,一般被称之为“UI组件”(界面)
footer这个高阶组件,一般被称之为“容器组件”(装饰)
一、如何使用高阶组件?
1、在类组件上有两种方式使用高阶组件——函数调用、ES6装饰器。
2、在函数式组件上只有一种方式使用高阶组件——函数调用。
二、使用场景
举例一:用高阶组件实现页面布局的差异化。
举例二:用高阶实现权限设计(适用小项目)。
举例三:把一些全局的api(公共方法)通过高阶组件传递给UI组件
三、二层的高阶组件
外层是业务层,内层是标准的高阶组件
如果是多层的高阶组件,其语法参考如下:
export default arg1 => arg2 = C => props => <C/>
fn()()(Home)
提示:多层的高阶组件,很少很少用得到。