React学习笔记之高阶组件应用

2024-05-06 16:44:47

字体：大中小

来源：转载

供稿：网友

是什么

高阶组件是一个函数，能够接受一个组件并返回一个新的组件。没有任何副作用。

为什么用

封装并抽离组件的通用逻辑，让此部分逻辑在组件间更好地被复用。

如何用

//hoc为我们的高阶组件，可以使用es7装饰器语法来使用高阶组件//当然也可以不用es7，如：let hocHello = hoc(Hello)，只是es7的语法更优雅一些。//高阶组件可以叠加使用，可以对一个组件使用多个高阶组件@hoc       class Hello extends React.Component { //}

如何实现

属性代理

下面的例子是最简单的一个实现

function hoc(ImportComponent) { return class Hoc extends React.Component { static displayName = `Hoc(${getDisplayName(ImportComponent)})` //displayName是设置高阶组件的显示名称 render() {  return <ImportComponent {...this.props} /> } }}function getDisplayName(Component) { return Component.displayName || Component.name || "Component"}

作用：操作prop，refs获取组件实例

注意事项：静态方法无法传递，必须手动复制；refs无法传递。

反向继承

下面的例子是最简单的一个实现

export function hoc(ImportComponent) { return class Hoc extends ImportComponent { static displayName = `Hoc(${getDisplayName(ImportComponent)})` render() {  return super.render() } }}

作用：操作state；渲染劫持（操作它的render函数）

注意事项：通过继承ImportComponent，除了一些静态方法，包括生命周期，state，各种function，我们都可以得到。

原则