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

This article introduces the relevant knowledge of "the difference and usage of State and Props in React". Many people will encounter such a dilemma in the operation of actual cases, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

In React, when you update the state of the component, the new state will be re-rendered to the page. You are not required to operate any DOM at this time. You can also think of a component as a state machine (State Machines) in React. Users will achieve different states when they operate, and then render them to your page to keep your page consistent with the data all the time.

How to define State

Defining an appropriate State is the first step in creating a component correctly. State must represent a complete set of states presented by a component UI, that is, any changes in the UI of a component can be reflected in the changes in the State; at the same time, State must also represent the minimum set of states presented by a component UI, that is, all states in the State are used to reflect the changes of the component UI, without any extra states, and do not need to be calculated by other states.

Whether a variable used in a component should be used as a component State can be judged by the following four criteria:

1. Is this variable obtained from the parent component through Props? If so, then it is not a state.

two。 Does this variable remain the same throughout the life cycle of the component? If so, then it is not a state.

3. Can this variable be calculated from other states (State) or attributes (Props)? If so, then it is not a state.

4. Is this variable used in the render method of the component? If not, then it is not a state. In this case, this variable is better defined as a common property of the component, such as the timer used in the component, should be directly defined as this.timer rather than this.state.timer.

If the state is not easy to understand friends, you can think that the state is the data!

The difference between State and Props

Props is the external interface of the component, and state is the internal interface of the component. Other components can be referenced within components, and references between components form a tree structure (component tree). If the lower-level components need to use the data or methods of the upper-level components, the upper-level components can be passed through the props properties of the lower-level components, so props is the external interface of the components. In addition to using the data passed by the upper components, the component itself may also need to maintain and manage the data, which is the interface state within the component pair. According to the external interface props and the internal interface state, the component calculates the UI of the corresponding interface.

Main differences:

State is mutable and is a set of states that reflect component UI changes

Props is read-only to components that use it, and Props can only be modified through the parent component of that component.

In a scenario where the component state is moved up, the parent component passes the desired state to the child component through the Props of the child component

Now let's complete an operation to show and hide DIV by clicking a button through the ES6 class React.Component. The effect is as follows:

Let's initialize the page first:

Title # myDiv {width:200px; height:400px; background:red; color:yellow; border:1px solid green;} class MyComponent extends React.Component {constructor (props) {super (props); / / add the isShow attribute this.state= {/ / value for true display and false for hidden for the current state. The default is true. IsShow:true}} render () {/ / return the initial content of the component return I'm here! }} ReactDOM.render (, document.querySelector ("# wrap"))

So far, the page has been initialized. In the above code, an attribute isShow with a default value of true is added to state. IsShow is used to control the display and hiding of div! Show when isShow is true and hide when false

The next two things to be done.

The first thing is to add a click event to the button, which is bound to the changeState method. Change the state of the isShow when you click the button, that is, to reverse the isShow.

Note:

1. The c in onClick should be capitalized.

2. The method followed by onClick is not wrapped in quotation marks, but {}

3. In the class of ES6, React will not bind this automatically, so you need to bind it through bind.

4. In the changeState method, the value of isShow cannot be modified directly, but needs to be set with the help of the setState method.

The second thing is to add a style attribute for id to myDiv's DIV, which shows and hides the DIV according to the state of the isShow.

Note:

1. Do not use double quotation marks for the value of style, but use {}, otherwise an error will be reported.

Final version code:

Title # myDiv {width:200px; height:400px; background:red; color:yellow; border:1px solid green;} class MyComponent extends React.Component {constructor (props) {super (props); / / add the isShow attribute this.state= {/ / value for true display and false for hidden for the current state. The default is true. IsShow:true}} changeState () {/ / the value of isShow cannot be directly modified here. But with the help of the setState method! This.setState ({/ / take reverse operation isShowreturn. State.isShow});} render () {/ / return the initial content of the component return {/ * React does not automatically bind this in ES6's class, so you need to bind yourself * /} I'm here! }} ReactDOM.render (, document.querySelector ("# wrap"))

From the above example, you can see that when you change the state of isShow, div will change accordingly!

This is the end of the content of "the difference and usage of State and Props in React". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.