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

Stateless components are generally used in applications where there is no data change. Where, such as rendering a piece of product introduction text, it does not need to be updated in real time. Its biggest advantage is that it can be reused at any time

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

The application scenarios of stateful components are much wider, and they can be found in basically all places where data needs to be changed.

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 id="歌单-this-state-count">歌单-{this.state.count}</h1>
        <ul>
          {this.state.list.map((item) => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
        <div>{this.state.isLoading ? "正在加载" : "加载完成"}</div>
      </>
    );
  }

[Related recommendations:

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!