Detailed explanation of practical cases of react props and state attributes

This time I will bring you a detailed explanation of the actual combat cases of react props and state attributes. What are the precautions for the actual combat of react props and state attributes? The following is a practical case, let's take a look.

In the previous section, we talked about React components and how to use ES6 classes to create a React component and use it in other places. In this section we will talk about the two souls of React components-props and state.

props

I don’t know if you still remember the attributes in the xml tag, like this:

<class id="1">
 <student id="1">John Kindem</student>
 <student id="2">Alick Ice</student>
</class>

The meaning expressed by such an xml file There are two students in Class 1. The student with student number 1 is named John Kindem, and the student with student number 2 is named Alick Ice. The id is an attribute. You can think of it as a constant, which is read-only.

html inherits from xml, and JSX is an extension of html and js in some sense, so the concept of attributes is naturally inherited.

In React, we use the concept of props to pass read-only values ​​​​to React components, like this:

// 假设我们已经自定义了一个叫Hello的组件
ReactDom.render(
  <Hello firstName={&#39;John&#39;} lastName={&#39;Kindem&#39;}/>,
  document.getElementById('root')
);

When calling a React component, we can pass it to the component as above Pass some constants for the component to call internally. The calling method is as follows:

class Hello extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <p>
        <h1>Hello, {this.props.firstName + ' ' + this.props.lastName}</h1>
      </p>
    );
  }
}
ReactDom.render(
  <Hello firstName={&#39;John&#39;} lastName={&#39;Kindem&#39;}/>,
  document.getElementById('root')
);

To obtain the passed props inside the component, you only need to use this.props object, but before using it, remember to overwrite the constructor of the component and accept it The value of props is used to call the parent class constructor.

Of course, props can also set default values, as follows:

class Hello extends React.Component {
  constructor(props) {
    super(props);
  }
  static defaultProps = {
    firstName: 'John',
    lastName: 'Kindem'
  };
  render() {
    return (
      <p>
        <h1>Hello, {this.props.firstName + ' ' + this.props.lastName}</h1>
      </p>
    );
  }
}
ReactDom.render(
  <Hello/>,
  document.getElementById('root')
);

Just declare a static props default value in the ES6 class, and the running effect is the same as above.

Props are not complicated and can be learned with a little practice.

state, component life cycle

You may recall, what if I want to add dynamic effects to a React component? It seems that the knowledge I have learned so far cannot solve this problem.

This problem needs to be solved using the state of the React component. State means state. In React, all changing control variables should be put into state. Whenever the content in the state changes, the page The corresponding component will be re-rendered. In addition, state is completely internal to the component. State cannot be transferred from the outside to the inside, nor can the value of state be directly changed.

Let’s give an example first:

import React from 'react';
import ReactDom from 'react-dom';
class Time extends React.Component {
  constructor(props) {
    super(props);
    // 初始化state
    this.state = {
      hour: 0,
      minute: 0,
      second: 0
    }
  }
  componentDidMount() {
    this.interval = setInterval(() => this.tick(), 1000);
  }
  componentWillUnmount() {
    clearInterval(this.interval);
  }
  tick() {
    // 计算新时间
    let newSecond, newMinute, newHour;
    let carryMinute = 0, carryHour = 0;
    newSecond = this.state.second + 1;
    if (newSecond > 59) {
      carryMinute = 1;
      newSecond -= 60;
    }
    newMinute = this.state.minute + carryMinute;
    if (newMinute > 59) {
      carryHour = 1;
      newMinute -= 60;
    }
    newHour = this.state.hour + carryHour;
    if (newHour > 59) newHour -= 60;
    // 设置新状态
    this.setState({
      hour: newHour,
      minute: newMinute,
      second: newSecond
    });
  }
  render() {
    return (
      <p>
        <h1>current time: {this.state.hour + ':' + this.state.minute + ':' + this.state.second}</h1>
      </p>
    );
  }
}
ReactDom.render(
  <Time/>,
  document.getElementById('root')
);

This completes a counter, the value changes once a second, let’s explain the code: First, the state is initialized in the constructor, like Like this:

constructor(props) {
  super(props);
  // 在这初始化state
  this.state = {
    ...
  }
}

To change the state, use a built-in function in the React component base class:

this.setState({
  ...
});

Be sure to pay attention to the scope of this before using this function. This in the arrow function points to External this, while this in a normal function points to the function itself.

In addition, the life cycle callbacks of two React components are used here:

componentDidMount() {
  // React组件被加载到dom中的时候被调用
  ...
}
componentWillUnmount() {
  // React组件从dom中卸载的时候被调用
  ...
}

So the above timer code should not be difficult after the React component is loaded into the dom. Set a timer to update the state every second. When the state is updated, the components in the page will be re-rendered. When the component is unloaded, the timer needs to be cleared. It's that simple.

However, React has a maximum limit for the frequency of state updates. Exceeding this limit will cause the performance of page rendering to decrease. You need to be careful not to use setState in high-frequency functions.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Operation Angularjs cross-domain whitelist setting

How to use webpack to handle cross-domain requests

The above is the detailed content of Detailed explanation of practical cases of react props and state attributes. For more information, please follow other related articles on the PHP Chinese website!