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

This article mainly explains "how React defines class components and function components". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how React defines class components and function components".

Which leads to the question, what is status?

For example, today's exam, failed the exam, because I am not in good shape, it is the state that affects my behavior.

The state in the component drives the page update, in other words, the data is stored in the component state, and the change of the data drives the update of the page.

To understand here, whose state is the state status? The state state is the state on the component instance object, not on the component class itself, but on the instance created by that class.

(class) one of the three major properties on the component instance: state

Display content

To achieve a requirement, switch hot / cool by clicking on the page

React / / 1. What data can be received in the component class Weather extends React.Component {/ * constructor depends on what data is passed when new is created * new Weather is not operated by us, but by * / constructor (props) of react operation {/ / haven't learned props yet, but need to use it. Imitate the super (props) syntax of the class itself written on the official website / / before this in the constructor points to the constructor instance object / / 16.8, state is {}, 16.8 and after, it is null this.state = {isHot: true,};} render () {console.log ("this:", this); return is very hot today }} / / 2. Rendering component to page ReactDOM.render (, document.getElementById ("test"))

Initialization data

React / / 1. What data can be received in the component class Weather extends React.Component {/ * constructor depends on what data is transmitted when new is created * new Weather is not operated by us, but the react operation * / constructor (props) {/ / haven't learned props yet, but we have to use it to imitate the official website. Otherwise, the / / class itself syntax super (props) cannot be executed. / / before this points to the constructor instance object / / 16.8, state is {}, 16.8 and after, it is null this.state = {isHot: true,};} / / state is render () {console.log ("this:", this) on the instance object of Weather. Return, the weather is very {this.state.isHot? "Hot": "cool"};} / / 2. Rendering component to page ReactDOM.render (, document.getElementById ("test"))

Next, write the click event. Note, first make an error demonstration.

/ / 1. What data can be received in the component class Weather extends React.Component {/ * constructor depends on what data is passed when new is created * new Weather is not operated by us, but by * / constructor (props) of react operation {/ / haven't learned props yet, but need to use it. Imitate the super (props) syntax of the class itself written on the official website / / before this points to the constructor instance object / / 16.8, state is {}, 16.8 and after, it is null this.state = {isHot: true,};} / / state is render () {console.log ("this:", this) on the instance object of Weather. Return (the weather today is very {this.state.isHot? "Hot": "cool"});}} function demo () {console.log ("demo called");} / / 2. Rendering component to page ReactDOM.render (, document.getElementById ("test"))

When I called the click event, I wrote onClick= {demo ()}

In the console, you will find that the function is executed immediately.

When react is in new Weather, the render method is called through an instance. If you want to get the value of return, you have to execute today's weather {this.state.isHot? "Hot": "cool"}. When the onClick assignment statement is executed, the return value of the demo () function call is given to onClick as a callback, and the return value of demo () is undifend, that is, giving undifend to onClick as a callback. * * this is an error because the function call is caused by adding () after demo. * * when clicked, undifend,react is called to handle this process. If it is undifend, there is no extra action.

Common mistakes in writing

Render () {console.log ("this:", this); return (the weather is very {this.state.isHot? "Hot": "cool");}

Render () {console.log ("this:", this); return (the weather is very {this.state.isHot? "Hot": "cool");}

Correct writing method

React / / 1. What data can be received in the component class Weather extends React.Component {/ * constructor depends on what data is passed when new is created * new Weather is not operated by us, but by * / constructor (props) of react operation {/ / haven't learned props yet, but need to use it. Imitate the super (props) syntax of the class itself written on the official website / / before this points to the constructor instance object / / 16.8, state is {}, 16.8 and after, it is null this.state = {isHot: true,};} / / state is render () {console.log ("this:", this) on the instance object of Weather. Return (the weather today is very {this.state.isHot? "Hot": "cool"});}} function demo () {console.log ("demo called");} / / 2. Rendering component to page ReactDOM.render (, document.getElementById ("test"))

Modify

Now that you have rendered the data to the page, you now want to modify the data on the page. If you want to modify the data, you must first get the isHot in state and look at a misspelled paragraph:

Function demo () {console.log ("demo called"); / / error demonstration const {isHot} = this.state; console.log ("isHot", isHot);}

Prompt xxx of undefined (reading 'state'), that is, state of undefined, when xxx is undefined, undefined.state will report this error. The word xxx here refers to this.

Let's print the this.

Function demo () {/ / error demonstration console.log ("this", this); const {isHot} = this.state; console.log ("isHot", isHot);}

Take a look at the code structure and comments

Through printing, it is found that if you put the custom function outside the class, the data can be displayed correctly, but you can't get / modify the data in state.

What data can be received in the class Weather extends React.Component {/ * constructor depends on what data is transmitted during the new * new Weather is not operated by us, but the react operation * / constructor (props) {/ / haven't learned props yet, but need to use it. Imitate the super (props) syntax of the class itself written on the official website / * before this points to the constructor instance object * 16.8in the constructor, state is {}, 16.8and after, it is null * state on the instance object of Weather * / this.state = {isHot: true,} } / / switch weather demo () {console.log ("this", this); const {isHot} = this.state; console.log ("isHot", isHot);} / / render render () {console.log ("this:", this) Return (the weather today is very {this.state.isHot? "Hot": "cool")

Note that the class is not a function body, so you don't need to write function

Thank you for reading, the above is the content of "how React defines class components and function components". After the study of this article, I believe you have a deeper understanding of how React defines class components and function components, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.