javascript - HOC 和标准组件之间的主要区别是什么？我什么时候应该正确使用它们？

Question

我对高阶组件和标准组件很好奇，我该怎么办。

根据文档所述:

高阶组件:

A higher-order component (HOC) is an advanced technique in React for reusing component logic. HOCs are not part of the React API, per se. They are a pattern that emerges from React’s compositional nature.

标准组件:

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. This page provides an introduction to the idea of components.

我只是认为它们都是可重用的渲染代码。

那么HOC和标准组件的优缺点是什么，我什么时候应该正确使用它们之一？

欢迎任何建议

Answer 1

当然!标准组件是一个可重用的组件，甚至HOC也是一个组件，用于重用组件逻辑。

高阶组件只是一个包装另一个组件的 React 组件。React HOC 模式通常作为函数实现，它基本上是一个类工厂，在受 Haskell 启发的伪代码中具有以下签名

hocFactory:: W: React.Component => E: React.Component

Where W (WrappedComponent) is the React.Component being wrapped and E(Enhanced Component) is the new, HOC, React.Component being returned.

The “wraps” part of the definition is intentionally vague because it can mean one of two things:

• Props Proxy: The HOC manipulates the props being passed to the WrappedComponent W.
• Inheritance Inversion: The HOC extends the WrappedComponent W.

在高层次上 HOC 使您能够:

• Prop 操作
• 代码重用、逻辑和引导抽象
• 状态抽象和操作
• 渲染劫持

使用标准组件时无法更改。

所以基本上，如果你需要操纵 Prop 并干扰渲染过程，你必须使用 HOC 而不是标准组件。

HOC 的简单示例

import React from 'react';
import AuthService from '../services/AuthService';

const AuthContext = React.createContext();

export default class AuthProvider extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            authService: new AuthService(),
            loggedIn: false, 
            userSigninFetching: true,
            userSigninError: '',
            user: null
        }   
    }

    componentWillMount() {
        this.processAuthState();
    }

    processAuthState = () => {
        this.setState({ userSigninFetching: true });

        const user = JSON.parse(localStorage.getItem('user'))

        if (!user) {
            this.setState({
                loggedIn: false,
                userSigninFetching: false,
                userSigninError: "Login Failed",
                user: null
            });
            return;
        } 

        this.setState({
            loggedIn: true,
            userSigninFetching: false,
            userSigninError: "Successfully Logged In",
            user: user
        });
    }

    render() {
        return (
            <AuthContext.Provider value={{ authState: this.state }}>
                {this.props.children}
            </AuthContext.Provider>
        )
    }
}


export const withAuth = (BaseComponent) => class AuthComponent extends React.Component {
    render() {
        return (
            <AuthContext.Consumer>
                {(context) =>  (
                    <BaseComponent
                        {...this.props}
                        authState={context ? context.authState : {
                            loggedIn: false,
                            userSigninFetching: false,
                            userSigninError: "",
                            user: null
                        }}
                    />
                )}
            </AuthContext.Consumer>
        )
    }
}

现在让我们用 withAuth 包装您的组件，以从组件本身访问身份验证状态。

import { withAuth } from '../providers/AuthProvider';

const myComponent = ({ authState }) => {
    return (
        <div>Custom component</div>
    );
}

export default withAuth(myComponent);

现在您可以在 myComponent 中访问应用程序身份验证状态。

block 引用

Here is the react guide for HOC

Also a good blog to dive in to depth of HOC