Detailed explanation of the usage of props and state attributes in React (code example)

This article brings you a detailed explanation of the usage of props and state attributes in React (code examples). It has certain reference value. Friends in need can refer to it. I hope it will help You helped.

This article mainly introduces the specific usage of React props and state attributes, which has certain reference value. Friends in need can refer to it. If there are any deficiencies, criticisms and corrections are welcome.

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>

What such an xml file expresses is that 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 the attribute. You can think of it as A constant that is read-only.
html inherits from xml, and JSX is an extension of html and js in some sense. The concept of attributes has naturally been inherited.
In React, we use the concept of props to pass read-only values ​​to the React component, like this:

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

When calling the React component, we can pass some constants to the component as above , so that the component can be called 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>
    );//欢迎加入前端全栈开发交流圈一起学习交流：864305860
  }//面向1-3年前端人员
}//帮助突破技术瓶颈，提升思维能力
 
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 (
      <div>
        <h1>Hello, {this.props.firstName + ' ' + this.props.lastName}</h1>
      </div>
    );//欢迎加入前端全栈开发交流圈一起吹水聊天学习交流：864305860
  }//面向1-3年前端人员
}//帮助突破技术瓶颈，提升思维能力
 
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? 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 corresponding component of the page will be Re-rendering. 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 (
      <div>
        <h1>current time: {this.state.hour + ':' + this.state.minute + ':' + this.state.second}</h1>
      </div>
    );
  }
}
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 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 the external this. 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 when 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 update frequency of state. 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.

The above is the detailed content of Detailed explanation of the usage of props and state attributes in React (code example). For more information, please follow other related articles on the PHP Chinese website!