Home > Article > Web Front-end > What is react stateless writing?
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
##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 {
var Header = (props) = ( <p>{props.xxx}</p> ); export default Header
class Home extends React.Component { constructor(props) { super(props); }; render() { return ( <header></header> //也可以写成<header></header> ) } } export default Home
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}依然获取到了值 ); }; };
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> ); }; };
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> ); }; };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.
constructor(props) { super(props); this.state = { name: props.name } };What does not add this is value, what adds this is key.
var Header = (props) = ( <p>{props.xxx}</p> ); export default Header
class Home extends React.Component { constructor(props) { super(props); }; render() { return ( <header></header> //也可以写成<header></header> ) } } export default Home
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> ); }; };
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!