Whether it is VUE or React, the core idea is inseparable from componentization, which breaks away from the traditional DOM operation to change the UI state, and further changes the UI state through data operation, avoiding the tedious DOM operation and bugs.

The two key points in componentization are the props and state of the component, and let’s be blunt about the properties and state of the component. A little personal understanding of how these two points run through the component-based development process and how to subvert the traditional manipulation of DOM to UI state changes is output here.

Here’s a different way of listing code and a poor stick figure to give my personal opinion.

Building a house

To understand what these concepts are and how to use them, let’s write a small example. How about just building a house?

component

Componentized development

The first step is to break up the UI into components. For example, we can break up the house like this:


Now code!

House: < div > < Roof / > / < Wall / > / Roof/Wall/Window / > < < / a > feel / / / Window/Door < / div >Copy the code

Wait, why does it look so HTML? That’s right! Parts of the React code look a lot like HTML, which is actually how it was designed to make it easier for Web designers to understand and write React code.

Therefore, in the above code, we use <div> as the container, which is basically the same as in HTML. Tags like Roof and Wall are custom tags/components that we will define soon.

Tip: The above code isn’t actually React code, or even JavaScript. For the time being, we’ll just use this loose syntax to introduce concepts. Once you understand the concepts, it’s time to learn the details of JavaScript and translate the concepts into real code.

To make the example easier to understand, let me simplify it: from now on, let’s write a super simple Web application that doesn’t even use images, just text.

For example, Roof is a div with text inside:

Roof:
  <div>roof</div>Copy the code

The other components, too, are just text-only divs. First, let’s take a look at the complete React style code for the house:

House:

  <div>
    <Roof />
    <Wall />
    <Window />
    <Door />
  </div>  
Roof:

  <div>roof</div>
Wall:

  <div>wall</div>
Window:

  <div>window</div>
Door:

  <div>door</div>Copy the code

There’s nothing hard about that, is there? House is composed of Roof, Wall, Window, and Door, which are components of plain text.

Finally, the React generated HTML looks like this:

<div>
  <div>roof</div>
  <div>wall</div>
  <div>windows</div>
  <div>door</div>
</div>Copy the code

Use Props to configure the color of the roof

Imagine that we send the specifications to a factory that makes all the parts. In the specification, we can tell the factory the inherent properties of each part, such as the color of the roof, the shape of the door, and so on. After producing the roof and doors as we requested, there will be no change in their properties, the roof is still blue and the doors are still rectangular. These properties don’t change at all.

In React, we call these properties Prop, short for property. There are two things you need to keep in mind about Prop: First, let’s determine the value of Prop and use it as part of the component design before the component is built. Second, the value of Prop never changes.

What does prop look like in the code? In the House component, if we want a blue Roof, we simply add the “color” attribute to the Roof component. It’s like specifying colors in a specification sent to a factory.

This is similar to adding attributes to an HTML tag:

House:

  <div>
    <Roof color="blue"/>
    ...
  </div>Copy the code

How do you use prop inside the Roof? The code looks like this:

Roof:

  <div>{props.color} roof</div>Copy the code

In this way? That’s right! But there are a few caveats:

The HTML-style code that defines a component is a template, not a pure HTML tag. This means we can put placeholders in it to change the content of the HTML output without having to write different HTML over and over again (remember Domo’s hat? That’s the concept of a placeholder!) . In this example, <Roof color=”blue” /> generates HTML that is <div>blue Roof <div>, while <Roof color=”red” /> generates <div>red Roof </div>, and so on.

The curly braces used in the template tell React we want to use placeholders here instead of plain text.

Props can be thought of as a set of all the property values of the Roof component. <Roof color=”blue” material=”wood” /> Then you can use props. Color and props. Material in the Roof component definition.

Use State to open the door

Add State to the component

Components can also have state. So what is state? State is a type of data that can be changed after a component is created.

For example, doors can be opened and closed. We can say that the state of the gate is state because its value can be changed after the gate is created. In this respect, state is different from prop, which does not change, for example, the shape of a door.

Changes in state values are usually caused by external events. In Web applications, these so-called external events usually include the user entering data, or retrieving data from a server, or the triggering of a timer.

Let’s add state to the door:

Door:
  State:
    status   // "open" 或 "closed"
  <div>Door is {state.status}</div>Copy the code

Like props, state is the set of all the state values inside the component. Therefore, we can use state.[something] in the template of the component definition.

Next, let’s add some “pseudocode” that processes user input to make the door interactive.

Door:
State:
  status // "open" 或 "closed"<div>Door is {state.status}</div> // Handle user input When opening the Door change state.status to"open"When closing, change state.status to"closed"Copy the code

The key point here is that the component’s state changes over time. The output of the template, the generated HTML, changes automatically based on state changes.

By the way, don’t forget that this is just “pseudocode”, not React code. Don’t try to copy and paste it into your project! I’m not responsible for your computer exploding…

State is private

The state of the component is private. Whether the door opens or closes, it is just the logic of the door. It has nothing to do with the house or any other component. In fact, we can completely remove the door from the house and it will still open or close on its own.

Therefore, the state of the Door is only visible inside the Door component. Inside the Door component, we can read or overwrite its state.

House: <div> <Door /> ... <! <div>The door is {door.state. status}</div> </div> Window:... <! -- Wrong! --> change door.state. status to Door'open'Door: ... <! -- Brother Dei, this is still wrong! -->ifA real estate agent can open the doorCopy the code

conclusion

So that’s prop and state. A prop is a configuration item for a component whose value is determined before the component is created. For example, the shape of the door and the color of the roof can be defined as prop. The value of prop never changes. State is the component’s private data and can only be used after the component is created. For example, the opening and closing state of a door can be included in state. State changes as some external event occurs. These so-called external events usually include the user entering data, or retrieving data from the server, or the triggering of a timer.