高阶组件相关知识点详解

高阶组件知识点理解

---

本章节，我们将深入高阶组件详细了解，高阶组件相关的知识点，包括什么是高阶组件，以及如何创建高阶组件，高阶组件实现的几种方式，常用的使用场景等等；首先我们需要来了解下，和高阶组件非常类似的一个概念，高阶函数：如果一个函数操作其他函数，将其他函数作为参数或返回值，将其称为高阶函数。

• 关于高阶组件的概念：高阶组件(high-order component)类似于高阶函数，接收 React 组件作为输入，输出一个新的 React 组件。高阶组件让代码更具有复用性、逻辑性与抽象特征。可以对 render 方法作劫持，也可以控制 props 与 state。

• 实现高阶组件的方法有如下2种:

  • 属性代理(props proxy)：属性组件通过被包裹的 React 组件来操作 props 。
  • 反向代理(inheritance inversion)：高阶组件继承于被包裹的 React 组件。

第一种方法：属性代理

属性代理是比较常见的一种高阶组件的实现方法。如下：

const MyContainer = (WrappedComponent) => {
    return class extends Component {
        render() {
            return (
                <WrappedComponent {...props} />
            )
        }
    }
}
export default MyContainer;

在 render 方法中返回传入 WrappedComponent 的 React 组件。这样就可以通过高阶组件来传递 props，这种方法即为属性代理。

当然，原始组件想要具备高阶组件对它的修饰，有下面两种方式：

第1种方式

export default MyContainer;

class MyComponent extends Component {
}

export default MyContainer(MyComponent);

第2种方式

使用 ES7 中的 decorator 的属性，我们可以通过 decorator 来转换，以此简化高阶组件的调用。

@MyContainer
class MyComponent extends Component {
}

export default MyComponent;

控制 props

我们可以读取、增加、编辑或是移除从 WrappedComponent 传进来的 props，但需要小心删除与编辑重要的 props。应该尽量对高阶组件的 props 作新的命名以防止混淆。

const MyContainer = (WrappedComponent) => {
    return class extends Component {
        render() {
            const newProps = { text: newText };
            return (
                <WrappedComponent {...props} {...newProps} />
            )
        }
    }
}

export default MyContainer;

从上面这个案例看来，当调用这个MyContainer高阶组件时，就可以使用 text 这个新的 props 了。

通过 refs 使用引用

在高阶组件中，可以接受 refs 使用 WrappedComponent 的引用。

const MyContainer = (WrappedComponent) => {
    return class extends Component {
        ref = (view) => {
            view.mentod();
        }
        render() {
            const props = Object.assign({}, this.props, { ref: this.ref });
            return (
                <WrappedComponent {...props} />
            )
        }
    }
}

export default MyContainer;

抽象 state

可以通过 WrappedComponent 提供的 props 和回调函数抽象 state。将原组件抽象为展示型组件，分离内部状态 。

const MyContainer = (WrappedComponent) => {
    return class extends Component {
        constructor(props);
        super(props);
        this.state = { name: '' };
    }

    onNameChange(text) {
        this.setState({ name: text });
    }

    render() {
        const newProps =  {
            name = { value: this.state.name, onChangeText: { this.onNameChange } }
        }
        return (
            <WrappedComponent {...this.props} {...newProps} />
        );
    }
}

export default MyContainer;

使用情况如下：

@MyContainer
class MyComponent extends Component {
    render() {
        return (
            <TextInput {...this.props.name} />
        );
    }
}

使用其他元素包裹 WrappedComponent

export default LoginPleaseMixin;

const MyContainer = (WrappedComponent) => {
    return class exrends PureComponent {
        render() {
            return (
                <View>
                    <WrappedComponent />
                </View>
            );
        }
    }
}

export default MyContainer;

第二种方法：反向继承

反向继承是另一种构建高阶组件的方法。

const MyContainer = (WrappedComponent) => {
    return class extends WrappedComponent {
        render() {
            return super.render();
        }
    }
}

export default MyContainer;

高阶组件返回的组件继承于 WrappedComponent。因为被动地继承了 WrappedComponent，所有的调用都会反向。
通过继承 WrappedComponent 来实现，方法可以通过 super 来顺序调用。
在反向继承方法中，高阶组件可以使用 WrappedComponent 引用，这意味着它可以使用 WrappedComponent 的 state、props、生命周期和render方法，但他不能保证完整的子组件树被解析。

渲染劫持

概念：渲染劫持指的就是高阶组件可以控制 WrappedComponent 的渲染过程，并渲染各种各样的结果。我们可以在这个过程中在任何 React 元素输出的结果中读取、增加、修改、删除 props，或读取或修改 React 元素树、或条件显示元素树，又或是用样式控制包裹元素树。
反向继承不能保证完整的子组件树被解析，这意味着将限制渲染劫持功能。但是如果元素树包裹了函数类型的 React 组件，就不能操作组件的子组件。

• 条件渲染：

const MyContainer = (WrappedComponent) => {
   return class extends WrappedComponent {
        render() {
            if (this.props.loggIn) {
                return super.render();
            } else {
                return null;
            }
        }
    }
}

export default MyContainer;

• 对 render 输出结果进行修改：

//...
const MyContainer = (WrappedComponent) => {
    return class extends WrappedComponent {
        render() {
            const elementsTree = super.render();
            let newProps = {};
            if (elementsTree && elementsTree.type === 'input') {
                newProps = {value: 'may the force be with you'};
            }
            const props = Object.assign({}, elementsTree.props, newProps);
            const newElementsTree = React.cloneElement(elementsTree, props, elementsTree.props.children);
            return newElementsTree;
        }
    }
}

export default MyContainer;

在这里，我们可以做各种各样的事，甚至可以反转元素树，或是改变元素树中的 props。

控制 state

高阶组件可以读取、修改或删除 WrappedComponent 实例中的 state，如果需要的话，也可以增加 state。但是这样做，可能让 WrappedComponent 组件内部状态变得一团糟。大部分的高阶组件都应该限制读取或增加 state，尤其是后者，可以通过重新命名 state，以防止混淆。

const MyContainer = (WrappedComponent) => {
    return class extends WrappedComponent {
        render() {
            return (
                <View>
                    <Text>
                        {JSON.stringify(this.props)}
                    </Text>
                    <Text>
                        {JSON.stringify(this.state)}
                    </Text>
                    {super.render()}
                </View>
           );
        }
    }
}

export default MyContainer;

组件命名

当包裹一个高阶组件时，我们失去了原始的 WrappedComponent 的 displayName，而组件名字是方便我们开发与调试的重要属性。

HOC.displayName = `HOC{${getDisplayName(WrappedComponent)}}`;

class HOC extends ... {
    static displayName = `{Hoc(${getDisplayName(WrappedComponent)})}`

    function getDisplayName(WrappedComponent) {
        return WrappedComponent.displayName ||
            WrappedComponent.name ||
            'Component';
    }
}

组件参数

调用高阶组件时需要传入一些参数，可以用简单方式实现。

function HOCFactoryFactory(...params) {
    return function HOCFactory(WrappedComponent) {
        return class HOC extends Component {
            render() {
                return (
                    <WrappedComponent  {...this.props} />
                );
            }
        }
    }
}

使用如下：

HOCFactoryFactory(params)(WrappedComponent)

// or

@HOCFactoryFactory(params)
class WrappedComponent extends Component {
    //...
}