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

Question

I read a lot about the differences between React component, stateless functional component, pure Component etc ...

I m curious about the use of method instead of stateless functional component, because i didnt found any information about it.

Here is my code, im making a simple login class

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

If i follow react logic i should create stateless functional component for pendingPage & loginForm instead of method inside Login class.

Should I ? I couldn't find any information if this was a OK practice or not.

Any benefit of using stateless functional component in this case ?

Answer 1

Stateless component refers to component with no state. So where can we use them? Answer is simple, if there is any UI component which needs no state. For instance, you need to show list of image. In this component you don't have to use stateful component. You can simply make a stateless component something like this

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

Now lets jump it to your case. Currently there is not state needed in pending page. But in case of login form you might need to make a stateful component. State might be needed for validation and other purposes.

In case of stateless pending page, you can do create a new component and import in your current file.

    import React from 'react';

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

    export default PendingPage;