本篇文章给大家带来的内容是关于react中高阶组件的使用示例，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
higher-order components
hoc 不是react的标准api。
hoc 是一个函数。
hoc 返回一个component。
示例：
const enhancedcomponent = higherordercomponent(wrappedcomponent);
使用场景代码复用类似react 0.15版本之前的mixin。
多个组件同用一段代码，或者同样的方法时，可以使用hoc。
示例：
import react, { purecomponent } from 'react';const common = (wrapcomponent) => {  return (    <div>      <h1>title</h1>      <wrapcomponent />    </div>  );};const header = () => <div>header</div>;const footer = () => <div>footer</div>;export default class extends purecomponent {  render() {    return (      <div>        <div>          <p>header component</p>          {common(header)}        </div>        <hr />        <div>          <p>footer component</p>          {common(footer)}        </div>      </div>    );  }}
在线示例
抽象state和更改props
可以通过wrappedcomponent包裹的组件公共state抽象出来。
可以通过wrappedcomponent包裹的组件传递修改、添加等的props.
示例：
const hocomp = (wrappedcomponent) => {  return class extends react.component {    constructor(props) {      super(props);      this.state = {name: ''};    }    componentdidmount() {      this.setstate({name: wrappedcomponent.displayname || wrappedcomponent.name || 'component';});    }    return <wrappedcomponent name={this.state.name} {...this.props}/>  }}
渲然劫持条件渲然。根据props或者state条件返回在渲然的内容。
示例：
const hocomp = (wrappedcomponent) => {  return class enhancer extends wrappedcomponent {    render() {      if (this.props.loggedin) {        return super.render()      } else {        return null      }    }  }}
反向继承返回的高阶组件类（enhancer）继承了 wrappedcomponent。
示例：
const enchancecomponent = (wrappedcompopnent) => {  return class extends wrappedcompopnent {    constructor(props) {      super(props);      this.state = { error: '' };    }    componentdidmount() {      /*do something*/      super.componentdidmount();    }    render() {      if (this.state.error) {        return <p>{this.state.error}</p>;      } else {        return super.render();      }    }  }};
在线示例
以上就是react中高阶组件的使用示例的详细内容。