其他分享
首页 > 其他分享> > React躬行记(10)——高阶组件

React躬行记(10)——高阶组件

作者:互联网

  高阶组件(High Order Component,简称HOC)不是一个真的组件,而是一个没有副作用的纯函数,以组件作为参数,返回一个功能增强的新组件,在很多第三方库(例如Redux、Relay等)中都有高阶组件的身影。由于遵循了装饰者模式的设计思想,因此不会入侵传递进来的原组件,而是对其进行抽象、包装和拓展,改变原组件的行为(图9形象的表达出了高阶组件的作用)。这样不仅增强了组件的复用性和灵活性,还保持了组件的易用性。灵活使用高阶组件,可大大提高代码质量。

图9  高阶组件的作用

  高阶组件有两种常见的实现方式:代理和继承,下面会分别做讲解。

一、代理方式

  高阶组件作为原组件的代理,不但会将其包裹住,还会给它添加新特性,并且提供了众多控制原组件的功能,例如操纵props、抽取state、访问实例和再包装等。

1)操纵props

  在原组件(即被包裹组件)接收到props之前,高阶组件可以将其拦截,执行增删改操作,再将处理过的props传给原组件。下面是一个简单的示例,会在高阶组件中新增了一个name属性。

//原组件
class Btn extends React.Component {
  render() {
    return <button>{this.props.name}</button>;
  }
}
//高阶组件
function HOC(Wrapped) {
  class Enhanced extends React.Component {
    constructor(props) {
      super(props);
      this.state = { name: "strick" };
    }
    render() {
      return <Wrapped {...this.state} />;
    }
  }
  return Enhanced;
}
const EnhancedBtn = HOC(Btn);

  HOC()函数就是高阶组件,在函数体中声明了用于修饰原组件Wrapped的新组件Enhanced,它的name状态作为props传给了Wrapped,并在render()方法中将Wrapped渲染出来。当执行HOC(Btn)后,就能得到增强了的EnhancedBtn组件。

2)抽取state

  将原组件的state和与之相关的处理函数抽取到高阶组件中,从而使得原组件无状态,变成容易复用的展示型组件。以一个能维护自己状态的Input组件为例,如下所示。

class Input extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: "" };
    this.handle = this.handle.bind(this);
  }
  handle(e) {
    this.setState({ value: e.target.value });
  }
  render() {
    return (
      <input type="text" value={this.state.value} onChange={this.handle} />
    );
  }
}

  现在将Input组件处理value状态和onChange事件的代码提升到高阶组件中,如下代码所示,在render()方法中初始化了一个newProps对象,用于把处理好的value状态和事件处理程序handle()回传给Input组件。

function stateHOC(Wrapped) {
  class Enhanced extends React.Component {
    constructor(props) {
      super(props);
      this.state = { value: "" };
      this.handle = this.handle.bind(this);
    }
    handle(e) {
      this.setState({ value: e.target.value });
    }
    render() {
      let newProps = {
        value: this.state.value,
        onChange: this.handle
      };
      return <Wrapped {...newProps} />;
    }
  }
  return Enhanced;
}

  经过高阶组件的抽象后,Input组件就变得很简单,如下代码所示,没有额外的逻辑操作,只要接收传过来的props即可。

class Input extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <input type="text" {...this.props} />;
  }
}

3)Refs

  通过第5篇提到的Refs访问方式,可以得到被包裹组件的实例,从而就能操纵组件中的DOM元素。以下面的Btn组件为例,在高阶组件中给它定义ref属性,这样就能在新组件的componentDidMount()方法中访问到Btn组件的实例。

class Btn extends React.Component {
  render() {
    return <button>提交</button>;
  }
}
function refHOC(Wrapped) {
  class Enhanced extends React.Component {
    render() {
      return <Wrapped ref={btn => { this.myBtn = btn }} />;
    }
    componentDidMount() {
      console.log(this.myBtn);        //Btn组件的实例
    }
  }
  return Enhanced;
}

  注意,ref属性不会传递给原组件,如果在上面的Btn组件中读取this.props.ref,那么得到的值将是undefined,如下所示。

class Btn extends React.Component {
  render() {
    console.log(this.props.ref);      //undefined
  }
}

4)包装

  在高阶组件中,还能通过引入其它React元素包装原组件,既能改变布局,也能增加样式。例如用一个包含内边距的<div>元素包裹原组件,并在其邻近的位置新增一个文本框,如下所示。

function wrappedHOC(Wrapped) {
  class Enhanced extends React.Component {
    render() {
      return (
        <div style={{ padding: 10 }}>
          <input type="text" />
          <Wrapped />
        </div>
      );
    }
  }
  return Enhanced;
}

二、继承方式

  继承是另一种构建高阶组件的方式,即新组件直接继承原组件(如下代码所示),从而实现通用逻辑的复用,并且还能使用原组件的state和props,以及生命周期等方法。

function inheritHOC(Wrapped) {
  class Enhanced extends Wrapped { }
  return Enhanced;
}

  在代理方式下的新组件和原组件会各自经历一次完整的生命周期,而在继承方式下,两者会共用一次生命周期。

1)渲染劫持

  在高阶组件中,可以通过super.render()渲染原组件,从而就能控制高阶组件的渲染结果,即渲染劫持。例如在新组件的render()方法中克隆原组件并为其传递新的props,如下所示。

function inheritHOC(Wrapped) {
  class Enhanced extends Wrapped {
    render() {
      //获取原组件
      const origin = super.render();
      //合并原组件的属性,并新增value属性的值
      const props = Object.assign({}, origin.props, {value: "strick"});
      return React.cloneElement(origin, props, origin.props.children);
    }
  }
  return Enhanced;
}

  代码中的React.cloneElement()方法能接收3个参数,第一个是要克隆的React元素,后两个是要传递的新props和原来的children属性。

  除了render()方法,其余诸如componentWillMount()、componentWillUpdate()等生命周期中的方法也是能劫持的。

2)使用state

  在高阶组件中,不仅可以读取原组件的state,还能对其进行修改或增加,甚至是删除。不过,这三类带有侵略性的操作,会让原组件内部变得混乱不堪,因此要慎用。在下面的示例中,Input组件包含一个value状态,高阶组件内的新组件Enhanced会在其构造函数中增加一个name状态,并修改value状态的值。

class Input extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: "" };
  }
  render() {
    return <input type="text" value={this.state.value} />;
  }
}
function stateHOC(Wrapped) {
  class Enhanced extends Wrapped {
    constructor(props) {
      super(props);
      this.state.name = "strick";        //增加状态
      this.state.value = "init";         //修改状态
    }
    render() {
      return super.render();
    }
  }
  return Enhanced;
}
let EnhancedInput = stateHOC(Input);

三、参数传递

  高阶组件除了一个组件参数之外,还能接收其它类型的参数,例如为高阶组件额外传递一个区分类别的type参数,如下所示。

HOC(Wrapped, type)

  不过,在React中,函数式编程的参数传递更为常用,即使用柯里化的形式,如下代码所示,其中HOC(type)会返回一个高阶组件。

HOC(type)(Wrapped)

  而在第三方库中,这种形式的高阶组件被大量应用,例如Redux中用于连接React组件与其Store的connect()函数,它是一个能返回高阶组件的高阶函数,其参数可以是两个函数,如下所示。

const Enhanced = connect(mapStateToProps, mapDispatchToProps)(Wrapped);

  将上面这条语句拆分成两条目的更为清晰的语句,就能让人更容易理解代码的意图,如下所示。

const enhance = connect(mapStateToProps, mapDispatchToProps);
const Enhanced = enhance(Wrapped);

  虽然这种形式的高阶组件会让人困惑,但是更易于组合。因为它会把参数序列处理到只剩一个组件参数,而高阶组件的返回值也是一个组件,也就是说,前一个高阶组件的返回值可以作为后一个高阶组件的参数,从而使得这些高阶组件可以组合在一起。例如有三个高阶组件f、g和h,它们可以像下面这样组合在一起。

f(g(h(Wrapped)))

  如果要嵌套的高阶组件很多,那么这种写法将变得异常丑陋且难以阅读。这个时候,就可以引入compose()函数,它能将函数串联起来,即用平铺的写法实现函数的组合,如下代码所示,省略了compose()函数的具体实现。

compose(f, g, h)

  compose()函数的执行方向是自右向左,并且还有一个限制,那就是第一个高阶组件(即h)可以接收多个参数,但之后的就只能接收一个参数。

四、命名

  在高阶组件中创建的新组件,不会再沿用原组件的名称。为了便于在React Developer Tools中调试,需要为新组件设置一个显示名称,例如新组件的名称是“Enhanced”,原组件的名称是“Input”,那么就以“Enhanced(Input)”为显示名称。

  为了完成这个功能,高阶组件可以修改成下面这样。注意,在定义displayName属性时,用到了ES6新增的模板字面量。

function HOC(Wrapped) {
  class Enhanced extends React.Component { }
  Enhanced.displayName = `Enhanced(${getDisplayName(Wrapped)})`;
  return Enhanced;
}

  getDisplayName()函数用于获取组件的名称(如下代码所示),如果组件的displayName属性不存在,那么就改用name属性,即类或函数的名称。

function getDisplayName(Wrapped) {
  return Wrapped.displayName || Wrapped.name || "Component";
}

五、注意事项

(1)不要在组件的render()方法中使用高阶组件。因为高阶组件每次都会创建一个新组件,而根据React的diff算法可知,原组件(即前一次所创建的组件)会先被卸载掉,然后重新挂载新组件。这么做不仅性能低下,而且原组件的状态和其所有子组件都将丢失。

(2)高阶组件创建的新组件不会包含原组件的静态方法,如果需要,那么就得手动复制。

 

标签:10,return,躬行,React,Wrapped,Enhanced,props,组件,高阶
来源: https://www.cnblogs.com/strick/p/10710132.html