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

This article focuses on "how to use state and setState in React components". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor learn how to use state and setState in React components.

Basic use of state

State is data, which is private data within a component and can only be used within a component.

The value of state is an object, and you can get the status through this.state.

SetState () modify status

The state is mutable and can be changed through this.setState ({data to be modified})

Note: unlike vue syntax, do not directly modify the value in state, this is wrong!

/ / correct this.setState ({count:this.state.count+1}) / / incorrect this.state.count+=1

Finally, combined with the above, we write a simple accumulator, but before that, we need to solve the problem of this pointing in the custom method, otherwise the this point will be undefined, we generally want this to point to the component instance.

Solution:

1. Arrowhead function

Take advantage of the fact that the arrow function itself does not bind this.

The this in the class App extends React.Component {state= {count:0,} render () {/ / arrow function points to the outside Han Jing Point to the render () method return (total: {this.state.count} {this.setState ({count:this.state.count+1})}} > click + 1)}} ReactDOM.render ( Document.getElementById ('root'))

However, this method will lead to too much code in the JSX syntax, which is not conducive to indicating the project structure, and is generally not recommended.

2.Function.prototype.bind ()

Use the bind method in ES5 to bind the this in the event handler to the component example

Class App extends React.Component {constructor () {super () / / super () must be written At this point, a requirement of class in ES6 syntax / / state can be put into constructor () at this time this.state= {count:0 } this.add=this.add.bind (this) / / point the this to the external Han Jing in the render () {/ / Arrow function bound to the instance} / / event handler add () {this.setState ({count:this.state.count+1})} Point here to the render () method return (total: {this.state.count} Click + 1)}} ReactDOM.render (, document.getElementById ('root'))

Sample method of 3.class

Using the class instance method in the form of arrow function, this method is relatively simple and highly recommended.

Note: this syntax is experimental, but due to the presence of babel in scaffolding, it can be used directly.

Class App extends React.Component {state= {count:0,} add= () = > {this.setState ({count:this.state.count+1})} render () {/ / Arrow function points to external Han Jing Point here to the render () method return (total: {this.state.count} Click + 1)}} ReactDOM.render (, document.getElementById ('root')) At this point, I believe you have a deeper understanding of "how to use state and setState in React components". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue 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.