javascript - React Class 的方法代替 React 无状态功能组件

Question

我读了很多关于 React 组件、无状态功能组件、纯组件等之间的区别......

我很好奇使用方法而不是无状态功能组件，因为我没有找到任何相关信息。

这是我的代码，我正在制作一个简单的登录类

// --------------------------- //
// -- LOGIN REACT COMPONENT -- //
// --------------------------- //

export default class Login extends React.Component {
    constructor(props) {
        super(props);
        this.dataLoaded = false;
        this.state = {
            login  : 'pending', // 3 values : success, fail, pending => 3 differents render
            verify : false // could trigger visual cue on loading page when switched to 'true'
        };
        // Verify User if provided
        this.verifyUserToken(userData.userId, userData.token);
    }

    //////////////////
    // -- RENDER -- //
    //////////////////
    render() {
        if (this.state.login === 'pending') return this.pendingPage();
        if (this.state.login === 'success') return <App login={true} />; // ./App.js
        if (this.state.login === 'fail') return this.loginForm();
        return <div> This page should never load </div>;
    }

    // -- PENDING PAGE -- //
    pendingPage() {
        let loader = icons[10];
        return (
            <div id="login">
                <img src={loader} alt="" className="loader" />
            </div>
        );
    }

    // -- LOGIN FORM-- //
    loginForm() {
        return (
            <div id="login">
                <form>
                    <div id="errorLogin" className="hidden">
                        {stringsLocalized.login.errorLogin}
                    </div>
                    <input type="text" id="pseudo" placeholder={stringsLocalized.login.pseudo} />
                    <input type="password" id="password" placeholder={stringsLocalized.login.password} />
                    <button type="submit" onClick={this.handleClickLogin}>
                        {stringsLocalized.login.button}
                    </button>
                </form>
            </div>
        );
    }

    ////////////////////
    // -- HANDLERS -- //
    ////////////////////

    handleClickLogin = e => {
        e.preventDefault();
        let pseudo = document.querySelector('#pseudo').value;
        let password = document.querySelector('#password').value;
        this.verifyUserPassword(pseudo, password);
    };

如果我遵循 React 逻辑，我应该为 pendingPage 和 loginForm 创建无状态功能组件，而不是在 Login 类中创建方法。

我应该吗？我找不到任何信息这是否是一种好的做法。

在这种情况下使用无状态功能组件有什么好处？

Answer 1

无状态组件是指没有状态的组件。那么我们可以在哪里使用它们呢？答案很简单，如果有任何 UI 组件不需要状态。例如，您需要显示图像列表。在此组件中，您不必使用有状态组件。你可以简单地制作一个像这样的无状态组件

const ImageItem = () => {
   return (
      <img src='hi.png' width={100} height={100}/>
   )
} 

现在让我们跳转到您的案例。目前在待定页面中不需要状态。但是在登录表单的情况下，您可能需要制作一个有状态的组件。验证和其他目的可能需要状态。

如果是无状态挂起页面，您可以创建一个新组件并导入到您当前的文件中。

    import React from 'react';

    const PendingPage = () => {
        const loader = icons[10];
        return (
            <div id="login">
                <img src={loader} alt="" className="loader" />
            </div>
        );
    }

    export default PendingPage;