The stateless writing method of react is "{props.xxx}". Its stateless component is mainly used to define templates, receive data passed from the parent component props, and use the expression of "{props.xxx}" Put props into the template.

The operating environment of this article: Windows7 system, react17.0.1, Dell G3.

What is the way to write stateless react?

How to write stateless components and stateful components in React and the differences

props.xxx} to stuff props into the template. Stateless components should keep the template pure to facilitate component reuse. Create stateless components as follows:

var Header = (props) = (
    <p>{props.xxx}</p>
);
export default Header

Copy after login

Copy after login

this The expression of .state.xxx} mounts the business data to the instance of the container component (stateful components can also be called container components, and stateless components can also be called display components), and then pass props to the display component, and the display component receives props, stuff props into the template. Create a stateful component as follows:

class Home extends React.Component {
    constructor(props) {
        super(props);
    };
    render() {
        return (
            <header></header>  //也可以写成<header></header>
        )
    }
}
export default Home

Copy after login

Copy after login

class Home extends React.Component {
    constructor() {
        super();
    };
    render (){
        return(
            <p>
                <header></header>
            </p>
        );
    };
};

class Header extends React.Component {
    constructor() {
        super();
    };
    render() {
        return (
            <p>{this.props.name}</p>  //构造函数中并没有传递props属性，这里通过{this.props.name}依然获取到了值
        );
    };
};

Copy after login

Copy after login

class Header extends React.Component {
    constructor(props) {
        super();
        this.name = props.name;  //获取到子组件实例上的props.name属性，赋值给实例属性name
    };
    render() {
        return (
            <p>{this.name}</p>
        );
    };
};

class Header extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            nameOne: props.name,
            nameTwo: this.props.name  //super()方法中传递了props属性，this.props才可以获取到name属性
        }
    };
    render() {
        return (
            <p>{this.state.nameOne}{this.state.nameTwo}</p>
        );
    };
};

Copy after login

Copy after login

Did you find that the subclass super method passes the props parameters to the parent class Component, and the Component mounts the props parameters to its instance attribute props. Therefore, you can only use this in the constructor by passing the props parameter to the super method, props.xxx

class Header extends React.Component {
    constructor(props) {
        super();
        this.state = {
            nameOne: this.props.name, 
            nameTwo: this.props  
        };
        console.log(this.props.name);  //报错
        console.log(this.props);  //undifined
    };
    render() {
        return (
            <p>{this.state.nameOne}{this.state.nameTwo}</p>
        );
    };
};

Why does this.props print out undefined? Because props are parameters passed in when calling the subcomponent, props cannot be accessed inside the constructor, so for this.props.name, there is no doubt that an error will be reported.

constructor(props) {
    super(props);
    this.state = {
        name: props.name
    }
};

Components in React are mainly divided into two categories: stateless components and stateful components.

1. Stateless components are mainly used to define templates, receive data passed from parent component props, and use the expression {props.xxx} to stuff props into the template. Stateless components should keep the template pure to facilitate component reuse. Create stateless components as follows:

var Header = (props) = (
    <p>{props.xxx}</p>
);
export default Header

2. Stateful components are mainly used to define interaction logic and business data (if Redux is used, business data can be extracted and managed uniformly), use {this The expression of .state.xxx} mounts the business data to the instance of the container component (stateful components can also be called container components, and stateless components can also be called display components), and then pass props to the display component, and the display component receives props, stuff props into the template. Create a stateful component as follows:

class Home extends React.Component {
    constructor(props) {
        super(props);
    };
    render() {
        return (
            <header></header>  //也可以写成<header></header>
        )
    }
}
export default Home

This is the official default writing method. In the constructor, a parameter must be passed by default, and the super() method must be called to obtain an instance of the subclass. But what is more confusing is why these parameters should be passed, and what is the use of passing these parameters?

Because from the perspective of the component in render(), the constructor can obtain the props attribute on the component instance without passing parameters. As follows:

class Home extends React.Component {
    constructor() {
        super();
    };
    render (){
        return(
            <p>
                <header></header>
            </p>
        );
    };
};

class Header extends React.Component {
    constructor() {
        super();
    };
    render() {
        return (
            <p>{this.props.name}</p>  //构造函数中并没有传递props属性，这里通过{this.props.name}依然获取到了值
        );
    };
};

This is easier to understand, because the render() method is a method on the subcomponent prototype. When obtaining instance attributes, you must access them through this. If you remove this, you will not be able to obtain them.

Then the question comes, what if we want to access props in the constructor? At this point, we need to pass a props parameter in the constructor constructor so that we can access the props attribute on the subcomponent instance. As follows:

class Header extends React.Component {
    constructor(props) {
        super();
        this.name = props.name;  //获取到子组件实例上的props.name属性，赋值给实例属性name
    };
    render() {
        return (
            <p>{this.name}</p>
        );
    };
};

There is another question, why do we need to pass a props attribute in the super(props) method? Look at the following example:

class Header extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            nameOne: props.name,
            nameTwo: this.props.name  //super()方法中传递了props属性，this.props才可以获取到name属性
        }
    };
    render() {
        return (
            <p>{this.state.nameOne}{this.state.nameTwo}</p>
        );
    };
};

In fact, the values ​​​​of props.name and this.props.name are the same, but they are still different. The props in props.name are the attribute props of the subcomponent. , but the props in this.props.name are not the attribute props of the subcomponent. Although the values ​​are the same, these props are actually passed to the parent class Component when the super method is called, so this.props .name obtains the props attribute in the Component parent class. Take a look at the source code of React:

Did you find that the subclass super method passes the props parameters to the parent class Component, and the Component mounts the props parameters to its instance attribute props. Therefore, you can only use this in the constructor by passing the props parameter to the super method, props.xxx

If the props parameter is not passed in the super method, an error will be reported when getting the value of this.props.name. Obtain this.props and display it as undiffed: as follows:

class Header extends React.Component {
    constructor(props) {
        super();
        this.state = {
            nameOne: this.props.name, 
            nameTwo: this.props  
        };
        console.log(this.props.name);  //报错
        console.log(this.props);  //undifined
    };
    render() {
        return (
            <p>{this.state.nameOne}{this.state.nameTwo}</p>
        );
    };
};

The essence of this writing method is to assign an instance attribute props of the sub-component Header to the instance attributes state.nameOne and state.nameTwo of the sub-component Header. In simple terms , that is, the Header subcomponent creates a state attribute, and then assigns its own props attribute to its own state attribute.
Why does this.props print out undefined? Because props are parameters passed in when calling the subcomponent, props cannot be accessed inside the constructor, so for this.props.name, there is no doubt that an error will be reported.

So, for the props parameters in the constructor and the props parameters in super, if you don’t use this.props and props in the constructor, you don’t need to pass parameters at all. Otherwise, pass the reference. But the values ​​obtained are the same for this.props and props, so you can write either one. However, both parameters are written in the official documentation. So for the sake of rigor, let’s write them all down.

However, I personally still like this way of writing.

constructor(props) {
    super(props);
    this.state = {
        name: props.name
    }
};

What does not add this is value, what adds this is key.

Recommended learning: "react video tutorial"

The above is the detailed content of What is react stateless writing?. For more information, please follow other related articles on the PHP Chinese website!