Shulou(Shulou.com)06/02 Report--

This article mainly introduces how to write react stateless, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

React stateless is written as "{props.xxx}", and its stateless components are mainly used to define templates, receive data passed from the parent component props, and use expressions of "{props.xxx}" to cram props into the template.

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

The Writing and difference of stateless components and stateful components in React

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 the parent component props, and use expressions of {props.xxx} to stuff props into the template. Stateless components should maintain the purity of templates to facilitate component reuse. Create a stateless component as follows: var Header = (props) = (

{props.xxx}

); Export default Header2, stateful components are mainly used to define interaction logic and business data (if Redux is used, business data can be extracted and managed), business data is mounted to instances of container components using expressions of {this.state.xxx} (stateful components can also be called container components, stateless components can also be called presentation components), and then props is passed to the presentation component, which receives props Stuff props into the template. Create stateful components as follows: class Home extends React.Component {constructor (props) {super (props);}; render () {return (/ / can also be written as)}} export default Home. This is the official default. By default, a parameter is passed in the constructor, and the super () method is called to get the instance of the subclass. But what's puzzling is why and what's the use of passing these parameters? Because from the perspective of the components in render (), the constructor can get the props property on the component instance without passing parameters. As follows: class Home extends React.Component {constructor () {super ();}; render () {return (

);};}; class Header extends React.Component {constructor () {super ();}; render () {return (

{this.props.name}

/ / the props attribute is not passed in the constructor, and the value is still obtained through {this.props.name}.

This is easy to understand, because the render () method is a method on the subcomponent prototype, and the instance properties are accessed through this when you get the instance properties, but you can't get them if you remove the this.

So the question is, what if we want to access props in the constructor? At this point, we will pass a props parameter in the constructor constructor so that we can access the props property on the subcomponent instance. As follows:

Class Header extends React.Component {constructor (props) {super (); this.name = props.name; / / gets the props.name attribute on the child component instance and assigns it to the instance property name}; render () {return (

{this.name}

);};}; there is another question: why do you also 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 () method passes the props property before this.props can get the name property}}; render () {return (

{this.state.nameOne} {this.state.nameTwo}

);}

In fact, the values of props.name and this.props.name are the same, but there is still a difference between them. The props in props.name is the attribute props of the child component, but the props in this.props.name is not the attribute props of the child component, although the value is the same, this props is actually passed to the parent class Component when calling the super method, so this.props.name gets the props property in the parent class of Component. Take a look at the React source code:

Notice that the subclass super method passes the props parameter to the parent class Component,Component and mounts the props parameter to its instance property props. So, you can use this,props.xxx in the constructor only if you pass the props parameter to the super method

If the props parameter is not passed in the super method, getting the value of this.props.name will result in an error. The obtained this.props is displayed as undifined:

Class Header extends React.Component {constructor (props) {super (); this.state = {nameOne: this.props.name, nameTwo: this.props}; console.log (this.props.name); / / error console.log (this.props); / / undifined}; render () {return (

{this.state.nameOne} {this.state.nameTwo}

);}

The essence of this writing is to assign the instance properties state.nameOne and state.nameTwo of the sub-component Header to the instance property props of the sub-component Header. To put it simply, the header sub-component creates a state property, and then assigns its own props property to its own state property.

Why does this.props print out undefined? Because props is the parameter passed in when the subcomponent is called, there is no access to props inside the constructor, so for this.props.name, there is no doubt that an error will be reported.

So, for the props parameter in the constructor and the props parameter in super, if you don't use this.props and props in the constructor, you don't have to pass parameters at all. On the contrary, it is necessary to pass the parameters. But for both this.props and props, the values are the same, so you can write either. But both parameters are written in the official document. So for the sake of rigor, let's write it all down.

However, I personally still like this way of writing.

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

The one without this is value, the one with this is key.

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 the parent component props, and use expressions of {props.xxx} to stuff props into the template. Stateless components should maintain the purity of templates to facilitate component reuse. Create a stateless component as follows: var Header = (props) = (

{props.xxx}

); Export default Header2, stateful components are mainly used to define interaction logic and business data (if Redux is used, business data can be extracted and managed), business data is mounted to instances of container components using expressions of {this.state.xxx} (stateful components can also be called container components, stateless components can also be called presentation components), and then props is passed to the presentation component, which receives props Stuff props into the template. Create stateful components as follows: class Home extends React.Component {constructor (props) {super (props);}; render () {return (/ / can also be written as)}} export default Home. This is the official default. By default, a parameter is passed in the constructor, and the super () method is called to get the instance of the subclass. But what's puzzling is why and what's the use of passing these parameters? Because from the perspective of the components in render (), the constructor can get the props property on the component instance without passing parameters. As follows: class Home extends React.Component {constructor () {super ();}; render () {return (

);};}; class Header extends React.Component {constructor () {super ();}; render () {return (

{this.props.name}

/ / the props attribute is not passed in the constructor, and the value is still obtained through {this.props.name}.

This is easy to understand, because the render () method is a method on the subcomponent prototype, and the instance properties are accessed through this when you get the instance properties, but you can't get them if you remove the this.

So the question is, what if we want to access props in the constructor? At this point, we will pass a props parameter in the constructor constructor so that we can access the props property on the subcomponent instance. As follows:

Class Header extends React.Component {constructor (props) {super (); this.name = props.name; / / gets the props.name attribute on the child component instance and assigns it to the instance property name}; render () {return (

{this.name}

);};}; there is another question: why do you also 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 () method passes the props property before this.props can get the name property}}; render () {return (

{this.state.nameOne} {this.state.nameTwo}

);}

In fact, the values of props.name and this.props.name are the same, but there is still a difference between them. The props in props.name is the attribute props of the child component, but the props in this.props.name is not the attribute props of the child component, although the value is the same, this props is actually passed to the parent class Component when calling the super method, so this.props.name gets the props property in the parent class of Component. Take a look at the React source code:

Notice that the subclass super method passes the props parameter to the parent class Component,Component and mounts the props parameter to its instance property props. So, you can use this,props.xxx in the constructor only if you pass the props parameter to the super method

If the props parameter is not passed in the super method, getting the value of this.props.name will result in an error. The obtained this.props is displayed as undifined:

Class Header extends React.Component {constructor (props) {super (); this.state = {nameOne: this.props.name, nameTwo: this.props}; console.log (this.props.name); / / error console.log (this.props); / / undifined}; render () {return (

{this.state.nameOne} {this.state.nameTwo}

);}

The essence of this writing is to assign the instance properties state.nameOne and state.nameTwo of the sub-component Header to the instance property props of the sub-component Header. To put it simply, the header sub-component creates a state property, and then assigns its own props property to its own state property.

Why does this.props print out undefined? Because props is the parameter passed in when the subcomponent is called, there is no access to props inside the constructor, so for this.props.name, there is no doubt that an error will be reported.

So, for the props parameter in the constructor and the props parameter in super, if you don't use this.props and props in the constructor, you don't have to pass parameters at all. On the contrary, it is necessary to pass the parameters. But for both this.props and props, the values are the same, so you can write either. But both parameters are written in the official document. So for the sake of rigor, let's write it all down.

However, I personally still like this way of writing.

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

The one without this is value, the one with this is key.

Thank you for reading this article carefully. I hope the article "how to write react without State" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.