반응 상태 구성 요소는 무엇입니까?

반응 상태 구성 요소에는 두 가지 유형이 있습니다. 1. 상태를 정의할 수 있는 구성 요소인 상태 유지 구성 요소는 데이터를 변경해야 하는 경우에 사용됩니다. 2. 상태를 정의할 수 없는 구성 요소인 상태 비저장 구성 요소는 일반적으로 다음과 같은 경우에 사용됩니다. 데이터 자체가 없는 애플리케이션의 경우 변경할 위치입니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, 반응 버전 17.0.1, Dell G3 컴퓨터.

React 컴포넌트: Stateful 컴포넌트와 Stateless 컴포넌트

1. 컴포넌트 상태란 무엇입니까

정의: 특정 순간의 트랜잭션 형태를 설명하는 데 사용되는 데이터입니다. 일반적으로 상태로 작성됩니다.

특징: 상태가 변경될 수 있으며 그에 따라 뷰가 변경됩니다.

기능: (1) 데이터 저장 (2) 뷰의 후속 업데이트를 위한 기반 마련

예를 들어 카운터를 디자인하면 카운터가 +1 버튼을 클릭하면 숫자가 원래 숫자 + 1

2로 변경됩니다. 두 가지 상태

2.1 Stateless 컴포넌트: 상태를 정의할 수 없는 컴포넌트, 함수 컴포넌트를 Stateless라고도 합니다. Components

Stateless 컴포넌트는 일반적으로 제품 소개 텍스트를 렌더링하는 등 데이터 변경이 없는 곳에 사용되며 실시간으로 업데이트할 필요가 없다는 점이 가장 큰 장점입니다. 언제든지

2.2 상태 저장 구성 요소: 상태를 정의할 수 있는 구성 요소 범주 구성 요소는 상태 저장 구성 요소라고도 합니다.

상태 저장 구성 요소의 적용 시나리오는 기본적으로 데이터가 있는 모든 장소에서 찾을 수 있습니다. need to be Change

3. 클래스 컴포넌트 상태 인스턴스

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 비디오 튜토리얼】

위 내용은 반응 상태 구성 요소는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!