What are the react state components?

There are two types of react state components: 1. Stateful components are components that can define state and are used where data needs to be changed; 2. Stateless components are components that cannot define state and are generally used in There is no data change per se.

The operating environment of this tutorial: Windows7 system, react17.0.1 version, Dell G3 computer.

React components: stateful components and stateless components

1. What is component state

Definition: It is data used to describe the shape of a transaction at a certain moment. Generally written as state.

Features: The state can be changed, and the view will change accordingly

Function: (1) Save data (2) Lay the foundation for subsequent update of the view

For example , design a counter. After clicking the 1 button, the number of the counter will change to the original number 1

2. Two states

## 2.1 Stateless components: Components that cannot define state. Function components are also called stateless components

2.2 Stateful component: A component that can define state,Classic components are also called stateful components

3. Class component status instance

import React from "react";
export default class Hello extends React.Component {
  // 这里的state就是状态
  state = {
    list: [{ id: 1, name: "明天会更好" },{ id: 2, name: "难忘今宵" }],
    isLoading: true
  };
}
 
  render() {
//如果当state里的数据种类较多时可以使用解构赋值
// 例如：const { tabs, active, list, content } = this.state
    return (
      <>
        <h1>歌单-{this.state.count}</h1>
        <ul>
          {this.state.list.map((item) => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
        <div>{this.state.isLoading ? "正在加载" : "加载完成"}</div>
      </>
    );
  }

Redis video tutorial]

The above is the detailed content of What are the react state components?. For more information, please follow other related articles on the PHP Chinese website!