React手稿之高阶组件

Higher-Order ComponentsHOC 不是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 <div>{this.state.error}</div>; } else { return super.render(); } } }};在线示例