반응 상태를 얻는 방법

반응에서 상태를 얻는 방법: 먼저 해당 반응 코드 파일을 연 다음 반응에서 "this.state.{property}"를 통해 상태를 직접 얻을 수 있습니다.

이 튜토리얼의 운영 환경: windows7 시스템, React17.0.1 버전, Dell G3 컴퓨터.

반응 상태를 얻는 방법은 무엇입니까?

React에서는 this.state.{property}를 통해 직접 상태를 얻을 수 있는데, 상태를 수정하다 보면 주의해야 할 함정이 많은 경우가 많습니다.

다음은 세 가지 일반적인 트랩입니다.

1. 상태는 직접 수정할 수 없습니다.

구성 요소가 상태를 수정하면 렌더링이 다시 트리거되지 않습니다. 예:

//错误
this.state.title='React';
正确修改方式是使用setState（）；
//正确
this.setState({title:'React'});

2. 상태 업데이트는 비동기식입니다. setState가 호출되면 구성 요소 상태가 즉시 변경되지 않고 수정될 상태가 이벤트 대기열에 추가되며 반응은 실제 실행 시간을 최적화합니다. 자체 성능상의 이유로 여러 setState 상태 수정이 하나의 상태 수정으로 병합될 수 있습니다. 따라서 다음 상태를 계산하기 위해 현재 상태에 의존하지 마십시오. 상태 수정이 실제로 수행될 때 종속 this.state가 최신 상태라고 보장되지 않기 때문입니다. 왜냐하면 반응 자체가 여러 상태를 하나로 병합하기 때문입니다. .state는 여전히 상태입니다. 여러 상태 수정 이전의 상태도 현재 prop에 의존하여 다음 상태를 계산할 수 없습니다. props 업데이트도 비동기식이기 때문입니다. 전자상거래 어플리케이션의 경우 장바구니에서 구매버튼을 1번 클릭하면 구매수량이 1개 증가합니다. 연속 2번 클릭하면 2개 증가합니다. 리액트 병합 및 수정시 한 번 실행하면 다음 코드를 실행하는 것과 동일합니다.

Object.assign(
previousState,
{quantity:this.state.quantity+1},
{quantity:this.state.quantity+1},
)

그러면 이전 작업을 덮어쓰고 최종 구매 수량은 1만 증가합니다. 이때 다른 함수인 setState를 매개 변수로 사용할 수 있습니다. 두 개의 매개변수는 현재 최신 상태(이전 상태 preState(이 구성요소 상태가 수정되기 전의 상태)는 구성요소 상태가 업데이트된 후의 상태)이고, 두 번째 매개변수는 최신 props입니다. 목록은 다음과 같습니다.

//正确
this.setState((preState,props)=>({
counter:preState.quantity+1
}))

3. 상태 업데이트는 병합 프로세스입니다

구성 요소의 상태를 수정하기 위해 ssetState()를 호출할 때 전체 상태가 아닌 변경된 상태만 전달하면 됩니다. 구성 요소 상태가 업데이트되었습니다. 병합 프로세스입니다. 예를 들어 구성 요소 상태는

this.state({
title:'React',
content:'React is an wondeful JS library'
})

제목만 수정해야 하는 경우 수정된 제목만 setState에 전달하면 됩니다.

this.setState({title:'ReactJs'});

react가 병합됩니다. 원본 상태의 최신 제목, 원본 상태의 내용을 유지하면서 최종 병합 상태는 다음과 같습니다.

this.state({
title:'ReactJs,
content:''React is an wondeful Js library
})

관련 권장 사항: "

react tutorial

"

위 내용은 반응 상태를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!