How to implement Props Anti-pattern in React
This article mainly introduces the relevant knowledge of how to achieve Props anti-pattern in React, the content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value. I believe you will gain something after reading this React article on how to achieve Props anti-pattern. Let's take a look.
It is called an anti-pattern because using Props to generate state in getInitialState can lead to repeated "source trust" problems. And hesitate that the getInitialState function is called only when the component is rendered for the first time. That is, when the component renders with render for the second time, the getInitialState function will no longer be called. That is to say, if we want to change the value of Props through the second rendering, it is impossible to change the value of State.
Let's look at a piece of code:
Var MessageBox = React.createClass ({
GetInitialState: function () {
Return {name:'Mr.'+ this.props.name}
}
Render: function () {
Return {'Mr.'+ this.state.name}
}
});
ReactDOM.render (
Document.getElementById ('content')
);
For the above example, it can be said to be the use of an anti-pattern. If we want to render the component MessageBox again, change the name value of Props. We will find that the same content in div is still Mr. Rogers rather than Mr. Onmpw.
ReactDOM.render (
Document.getElementById ('content')
);
ReactDOM.render (
Document.getElementById ('content')
);
So, for the above example, it is better to use this.props directly in div than this.state.
Var MessageBox = React.createClass ({
Render: function () {
Return {'Mr.'+ this.props.name}
}
});
ReactDOM.render (
Document.getElementById ('content')
);
The result of this example is to output Mr. Onmpw on the page
ReactDOM.render (
Document.getElementById ('content')
);
If we render again, it will be Mr. Rogers
The situation described above is the anti-pattern that Props uses in getInitialState. Of course, if we can clarify the purpose of Props, using it in getInitialState will not lead to anti-pattern. For example, initialize a value and the value of the Prop does not change.
Var Counter = React.createClass ({
GetInitialState: function () {
Return {count: this.props.initialCount}
}
HandleClick: function () {
This.setState ({count: this.state.count + 1})
}
Render: function () {
Return {this.state.count}
}
});
ReactDOM.render (
Document.getElementById ('content')
);
This is the end of the article on "how to implement Props anti-pattern in React". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "how to achieve Props anti-pattern in React". If you want to learn more, you are welcome to follow the industry information channel.
