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);
    };

如果我遵循反應邏輯，我應該為 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;