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

This article mainly introduces what the react status component is, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, let the editor take you to understand it.

There are two kinds of react state components: 1, stateful components, can define state components, applied to the need to change data; 2, stateless components, can not define state components, generally applied in the place where there is no data change.

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

React components: stateful and stateless components

1. What is the component state

Definition: data used to describe the shape of a transaction at a certain time. Generally write state.

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

Function: (1) to save data (2) to lay the foundation for subsequent view updates

For example, if you design a counter, the number of the counter will change to the original number + 1 when you click the + 1 button.

2. Two states

2.1stateless components: components of state cannot be defined. Functional components are also called stateless components.

Stateless components are generally used in places where there is no data change, such as rendering a section of product introduction text, which does not need to be updated in real time, and its greatest advantage can be reused at any time.

2.2Stateful components: components that can define state. Class number components are also called stateful components.

The application scenario of stateful components is much broader, and it can be found in almost all places where data needs to be changed.

3. Class component status instance

Import React from "react"; export default class Hello extends React.Component {/ / the state here is status state = {list: [{id: 1, name: "tomorrow will be better"}, {id: 2, name: "unforgettable tonight"}], isLoading: true} } render () {/ / if there are many kinds of data in state, you can use deconstruction assignment / / for example: const {tabs, active, list, content} = this.state return (playlist-{this.state.count} {this.state.list.map ((item) = > ({item.name})} {this.state.isLoading? "loading": "loading complete"});} Thank you for reading this article carefully. I hope the article "what is the react status component shared by the editor is helpful to everyone?" at the same time, I also hope that you will support and pay attention to the industry information channel, and more related knowledge is waiting for you to learn!

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.