React 高阶组件

高阶组件定义

高阶组件类似于高阶函数，他接受一个React 组件作为输入，输出一个新的React 组件。高阶组件使我们的代码更具有可读性，逻辑性与抽象特性。

应用场景

• 阶组件的主要功能是封装并抽离组件的通用逻辑，让此部分逻辑在组件间更好地被复用。

高阶组件的实现方式

• 属性代理。高阶组件通过包裹的React 组件来操作props.
• 反向继承。高阶组件继承与被包裹的React 组件。

1，属性代理

import React ,{Component} from 'react';
import MyHoc from './MyHoc';
//@MyHoc decorator 转换
class MyComponent extends Component{
    render(){
        console.log('MyComponent',this.props);
        return(
            <div>
              {this.props.name}
             <button onClick={this.props.handleClick}>Click</button>
            </div>
        );
    }
}
export default MyHoc(MyComponent);

import React from 'react';
//高阶组件 输入组件 返回新组件
function getDisplayName(component) {
    return component.displayName || component.name || 'Component';
}
const MyHoc = WrappedComponent=>{
    return class extends React.Component{
        static displayName = `HOC(${getDisplayName(WrappedComponent)})`;
        
        handleClick(){
            alert('handle click')
        };
        render(){
            const props={age:26,name:'hoc'};
            return (<WrappedComponent {...props} handleClick={()=>this.handleClick()}/>);
        }
    }
}
export default MyHoc;

• 控制props
• 通过refs使用引用
• 抽象state

2.反向继承

3.组件命名

function getDisplayName(component) {
    return component.displayName || component.name || 'Component';
}
static displayName = `HOC(${getDisplayName(WrappedComponent)})`;

4.组件参数

有时，我们调用高阶组件时需要传入一些参数，如下

import React from 'react';
function getDisplayName(component) {
    return component.displayName || component.name || 'Component';
}
const MyHocParam = (...param) => {
    console.log(...param);
    return (WrappedComponent) => {
        return class extends React.Component {
            static displayName = `HOC(${getDisplayName(WrappedComponent)})`;

            handleClick() {
                alert('handle click')
            };
            render() {
                const props = {
                    age: 26,
                    name: 'hoc'
                };
                return (<WrappedComponent {...props} handleClick={() => this.handleClick()}/>);
            }
        }
    }
}
export default MyHocParam;

//调用
export default MyHocParam({'title':'参数传递'})(MyComponent)
或者
@MyHocParam({'title':'参数传递'})
class MyComponent extends Component

推荐阅读

• 深入浅出React高阶组件