React trick 1 (use of state and stateless components)

React trick 1 (use of state and stateless components)

There are 5 articles in this tutorial, one updated daily, please follow us! You can enter the historical news to view the previous articles, and stay tuned for our new articles!

1.React Tip 1 (Use of Stateful Components and Stateless Components) ----2018.01.04

2.React Tip 2 (Avoid meaningless parent nodes)----2018.01.05

3.React Skill 3 (How to render a List gracefully)----2018.01.06

4.React Skill 4 (How to deal with the Item in List)----2018.01.07

5.React technique 5 (TodoList implementation) ----2018.01.08

Development environment: Windows 8, node v8.9.1, npm 5.5.1, WebStorm 2017.2.2

Maybe we encounter such a problem when we develop?

What are React stateful and stateless components?

When to use React state components?

When to use React stateless components?

When I was just learning, I was silly, no matter what the situation is, I use the state component, of course, it will work, and it will not go wrong! But as a responsible programmer, although the appearance is awkward, but the heart is still very geek Yes! So how do we write React components elegantly?

React state component?

As the name implies, the component has a state, and when there is a state, there is a corresponding UI change!

If your UI does not need to change, please don't use state components!

The following is a typical official state component

Because this is a counter, it is constantly growing and changing. As long as the UI changes, then you need to use the state component!

React stateless components?

So when do you use stateless components?

That is, the component itself does not need to be responsible for UI changes, excluding sub-components

Looking back at our previous Index.jsx, and Shop.jsx

Maybe at the beginning, the difficult part is how to plan the components and how to write them?

This requires you to write more and slowly understand! Send everyone a sentence, and then in React: Everything is a component!

As long as your code, the same place appears twice, I think you should consider making it into a component, because this is not only easy to maintain, but also saves the amount of code!

If you encounter this situation, how to organize

Have three pieces of the same code?

According to the design principle, we need to make it into a component!

We can do this, but it's not the best way! Let's transform it!

We create a new SecondsBottom.jsx stateless component

import React from'react';

const SecondsBottom = ({seconds}) =>
    <div className="bottom">
        Seconds: {seconds}
    </div>
;

export default SecondsBottom;

Modify the writing of Seconds.jsx

render() {
    let state = this.state;
    return (
        <div className="cont">
            <div className="top">
                <i className="bd_logo1"/>
                This is {this.props.title}
            </div>
            {/*Here I wrote a three-in-the-value method*/}
            <SecondsBottom seconds={this.state.seconds}/>
            <SecondsBottom seconds={state.seconds}/>
            <SecondsBottom {...state}/>
        </div>
    );
}

What if you need to write some logical judgments in stateless components?

For example: seconds is less than or equal to 5 to display one style, and greater than 5 to display another style

import React from'react';

const SecondsBottom = ({seconds}) => {
    if (seconds <5) {
        return (
            <div className="bottom">
                Seconds less than 5: {seconds}
            </div>
        )
    } else {
        return (
            <div className="bottom">
                Seconds greater than 5: {seconds}
            </div>
        )
    }
};

export default SecondsBottom;

Of course your page can be written with ternary expressions!

import React from'react';

const SecondsBottom = ({seconds}) =>
    <div className="bottom">
        {seconds <= 5? "Less than or equal to 5": "Greater than 5"} Seconds: {seconds}
    </div>
;
export default SecondsBottom;

final effect!!!!

Reference: https://cloud.tencent.com/developer/article/1092772 React Tip 1 (Use of Stateful and Stateless Components)-Cloud + Community-Tencent Cloud