Let’s learn about lifting state up in reactjs

Tram Ho

1. Preamble

Hellooooooo and hello 500 brothers, I’m a city and this is a ” viblo ” version. I don’t know if you noticed, but I’ve been invisible for about a month. “If you sincerely want to know, we are ready to answer. To protect the world from destruction, to protect the earth’s peace. We represent the villains, full of love. and be ecstatic “ak actually doesn’t protect the world and doesn’t have any villains at all 😃 . In the last month, I have closed the door and cultivated one of my fingers that I have been wandering about for a while now. Can you guess what the evil finger is? You guessed it that’s react js . In this article, I will share with my friends how to make me chew again and again and again and again until recently swallowed. If reading the document is not difficult then it will be easy, but you can read it through before, link here . Because no matter how I say it, it is still the most authentic document, this is my personal opinion that I can draw if there is any missing place for you to teach.

2. Definition

According to the document, Lifting State Up is defined as follows.

several components need to reflect the same changing data. We recommend lifting the shared state up to their closest common ancestor

We can translate the above paragraph as follows:

When a data changes it will affect multiple components at the same time. State is encouraged to share in their parent component

Reading the paragraph above, you probably imagine how it works, right? Yes, it is simply when we change or add new data we need a variable to save the state – change state, but update the interface with that change.

Quite easily, right. Let me make it a little more twisted, how about when you have to update the state through many components. It sounds a little hard to imagine so I would like to use the image below to show you the problem

The question is how do we change those yellow piles and the blue piles also change. Umm !!! If when you code in a file, you will probably say that it is only necessary to save it to the state, ok note at least you have known the state so it is 50% successful. But if you have a dozen or so components, I guess you can still manage it, although finding a piece of code takes you dozens of minutes, sitting and re-reading the stream of your project will take about an hour. lake. But for you to go to work, or simply public code that someone wants to read your code, or debug code more easily, I recommend that you break up the code into separate modules and use the keyword Lifting. State Up . This paragraph is a bit lengthy for me to explain to some readers but the document still can not understand why should use it.

OK, next we continue, so the keyword will be Lifting State up, it translates the state upwards , it works exactly as the name implies. We will update that state on the father, then the father of his father 😃 , until the most common father.

I know everyone will have a way to split the interface into their own components, and it’s hard to judge whether you divide it correctly or not. But you guys have a most common father like yellow covering all of the above, usually I will use the app.js guy.

3. Apply to practical examples

With the view that only genius read the theory, it can be applied to practice and do it always. Up we together in part 3 to be able to understand what is really Lifting State up . Some notes, I will not use the example on the document because I actually find it is not easy and it writes all into the same file, but in my opinion, it is too difficult to track and debug. . So I will create a little math problem named ToDoApp. I will try to subdivide it so that you can see the meaning of Lifting State up . I know there are some segments that I have broken down to a point that are quite unreasonable, but please accept it temporarily. Because actually if taking a problem too detailed, it will be difficult to focus on each Lifting State up and make you lie with new knowledge. Ok no more verbose let’s go into the example ·

First we need a parent form that contains all the children

In app.js

And to be able to add a description in the section <Part book={newBook} onChangeText={this.onChangeText} /> we need to import Part from './Components/Part'; and let it work we have the following code:

Ok, let’s find out how it works. First of all, in the app file I wrote in 2 ways for you to easily imagine, the way I write a pure file into a file, how 2 I will separate the input into another file. I will have an interface form for you to enter input like this,

when you enter the values ​​I will save them into the state via the handleAdd function with title, and onChangeText with description, after you click the add button, I will perform the handleSubmit function to save all the above values ​​in the declared book array. Report on the state. So what is this array of books used for, please say that this array of books we will use to display data at the renderBooks function we call under render ()?

in this function it will browse through all the elements in the array, and to make it a bit more interesting I will return it as an input, when you change the value in this input box, I will call the function handleEditBook . In this function, I will simply edit the data with the element you changed, index === editIndex and then I update the value of the books array. And the miraculous thing happened when you updated the value, the title would immediately change,

I guess you can guess why 😃 . If you are still wondering, this is the place to create them

Ok, creativity comes here and I’m not afraid of getting lost. So do you see where lifting state up is applied? That’s right, I created a Part file to handle the data you pass in, here I only declare or if I can only process the data if needed, as you have seen the onChangeText function must complain. on the app, I will update and change the state , and I will pass book={newBook} back and forth Part to update the value value={book.description} back to it, so come up when you enter the value it can show up on the input bar you just entered so you know what you’ve entered.

4. Conclusion

By reading this, you probably have an idea of ​​what lifting state up is, right? If you pay attention, I guess you will have some questions, so with componet tree that if several dozen notes, we probably will have to pass it through to see the star. This answer I would like to be explained in the following article 😃 . Thank you for reading, if you have any questions, or have any part that you do not understand, you can comment below the comment section so that we can learn better. And especially do not forget to give me a like and a share!

Share the news now

Source : Viblo