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逻辑，则应该为endingPage和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;

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

1 个答案: