기능하는 setState를 사용하는 경우

기능하는 setState를 사용하는 경우

저는 지난 며칠 동안 다양한 요소를 작성할 수 있는 몇 가지 튜토리얼과 설명을 살펴보면서 React를 배워왔습니다. 가장은 바로, 「이것」입니다.setState하는 기능state포포컴컴

예를 들어 다음과 같은 클래스가 있다고 가정합니다.

class Photos extends React.Component {
    constructor() {
        super()
        state = {
            pictures: []
        }
    }

   componentDidMount() {
      // This is where the fetch and setState will occur (see below)
   }

    render() {
       return {
          <div className="container">
             {this.state.pictures}
          </div>
       }
    }
}

이 예에서는 API에서 이미지를 가져오는 방법을 보여 줍니다.

, 후, 「」, 「」를 합니다.pictures: []API " " " " " 상태 배열.

제 질문은 사진 상태 속성을 업데이트/오버라이드하는 방법에 대해 제가 본 다양한 방법에서 비롯되었습니다.

나는 그것을 2가지 다양한 방법으로 써왔다.

1) 이것은 매우 간단하고 읽기 쉬운 방법인 것 같다.

this.setState({pictures: pics})

2) 이 방법이 더 복잡하지만 더 안전한 방법이라고 생각합니다.

this.setState(prevState => ({
   pictures: prevState.pictures.concat(pics)
}))

어느 쪽이든 사용할 수 있는 장점을 설명해 주실 수 있습니까?향후 소품이나 상태 등에 대응해, 코드와 일치하고 싶기 때문에, 물론 가장 다재다능한 방법이 바람직합니다.

먼저, 두 구문이 완전히 다른 경우, 원하는 것은 두 구문의 차이입니다.

this.setState({pictures: this.state.picture.concat(pics)})

그리고.

this.setState(prevState => ({
   pictures: prevState.pictures.concat(pics)
}))

가 React를 사용하여 수행하는 .setState()내부적으로

React에 .setState()현재 상태로 만듭니다.콜이 , 「」가 됩니다.setState()을 사용법

는 여러 개의 "Respect"를 할 수 .setState()를 단일 업데이트로 호출하여 성능을 향상시킵니다.

하기 위해서, 경우를 생각해 에서는, 「아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아.setState()을 사용하다

myFunction = () => {

   ...
   this.setState({pictures: this.state.picture.concat(pics1)})
   this.setState({pictures: this.state.picture.concat(pics1)})
   this.setState({pictures: this.state.picture.concat(pics1)})

   ...
}

앱이 여러 개의 앱이 됩니다.setState()같은 일을 하면서 여러 장소에서 전화가 걸려올 수 있습니다.

효율적인를 수행하기 는 각 "Resact"에된 모든 합니다.setState()호출하여 개체를 한 후 하여 을 수행합니다.setState() 에르 setState()★★★★

의 「」입니다.setState(), 는이며, 할 수 있습니다.예를 들어, 동일한 사이클에서 항목 수량을 두 번 이상 늘리려고 하면 다음과 같습니다.

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

후속 콜은 같은 사이클 내의 이전 콜의 값을 덮어쓰기 때문에 수량은 1회만 증가합니다.다음 상태가 현재 상태에 따라 달라지는 경우 대신 업데이터 함수 양식을 사용하는 것이 좋습니다.

this.setState((state) => {
  return {quantity: state.quantity + 1};
});

상세한 것에 대하여는, 다음을 참조해 주세요.

• 상태 및 라이프 사이클 가이드
• : 제,, ??는 언제, 왜?setState()화는는? 츠요시
• : 왜 ?은 안 돼this.state시시업 데데 ?데? ????

- 기타 API - 반응합니다.컴포넌트 – 반응합니다.

따라서 동일한 키를 포함하는 객체가 있으면 키가 동일한 마지막 객체의 키 값이 저장됩니다.따라서 업데이트는 마지막 값으로 한 번만 수행됩니다.

데모 코드 및 상자

TL;DR: 기능setState는, 복수의 「」, 「」, 「」, 「」, 「」의 상태가 올바르게 갱신되는 것을 이 됩니다.setState는, 의 「S」와 같이 「S」가 됩니다.setState조정이 이루어지며 예기치 않은 상태가 발생할 수 있습니다.

Functional setState에 관한 이 훌륭한 기사를 확인하여 명확하게 이해하시기 바랍니다.

동작하고 있다 DEMO가 있습니다.

우선, 각각의 케이스에서 다른 작업을 하려고 합니다.한쪽에서 사진을 할당하고 다른쪽에서 사진을 연결합니다.

에는 state.state가 포함되어 .사진에는[1, 2, 3]에는 「」가 포함되어 있습니다.[4, 5, 6]

this.setState({pictures: pics})

이예를 들어, picture는 pictures입니다.this.state.pictures = [4, 5, 6]

this.setState(prevState => ({
   pictures: prevState.pictures.concat(pics)
}))

. .+ 가 포함됩니다를 들어, state . pictures는 + pictures는 다음과 같습니다.this.state.pictures = [1, 2, 3, 4, 5, 6]

어느 쪽이든 API 요구에 맞게 조정할 수 있습니다.페이지가 있는 응답과 같으면 각 요구에 대한 결과를 연결하는 것이 좋습니다.그렇지 않으면 매번 어레이 전체를 할당하기만 하면 됩니다.

기존 setState VS 기능 setState

그럼 ,, 신, 신, 신, 신, 당, now, , , now, now, now, now, now, now, now, now, now, now, now, now, now, now, now, now, now, now, now, nowsetState사물이나 기능을 가지고 있습니다.

모두 다른 , 으로 기능하고 있습니다.setState하다고 React는 조정 로, 그 프로세스입니다.그 과정에서 내부의 여러 오브젝트가 합쳐집니다.setState자주 또는 동시에 트리거되어 일괄 처리와 같은 변경 사항을 한 번에 적용합니다.이로 인해 다음과 같은 시나리오에서 예기치 않은 결과가 발생할 수 있습니다.

예:

increaseScoreBy3 () {
 this.setState({score : this.state.score + 1});
 this.setState({score : this.state.score + 1});
 this.setState({score : this.state.score + 1});
}

점수가 3씩 증가할 것으로 예상되지만 React는 모든 개체를 병합하고 한 번만 점수를 업데이트합니다(즉, 1씩 증가).

이는 함수 조정이 이루어지지 않고 아래 코드를 실행하면 예상대로 동작하기 때문에 기능적인 콜백이 빛을 발하는 경우 중 하나입니다.즉, 스코어를 3까지 갱신합니다.

increaseScoreBy3 () {
 this.setState(prevState => ({ score: prevState.score + 1 }));
 this.setState(prevState => ({ score: prevState.score + 1 }));
 this.setState(prevState => ({ score: prevState.score + 1 }));
}

빠른 답변:

항상 setState()의 함수 형식을 사용합니다.

this.setState((state, props)=>({
    someValue: state.somevalue + 1
}));

이 접근방식은 에러 발생률이 낮아 매우 찾기 어려운 버그를 제거하는 데 도움이 됩니다.리액트 배치로 여러 개의 업데이트를 배치하더라도 각 업데이트는 개별 함수 호출이며 이후 업데이트로 인해 일부 업데이트가 손실되는 일은 없습니다.

다른 접근법

this.setState({
someValue: state.somevalue + 1
});

자주 반복할 경우 React가 이러한 빈번한 업데이트를 배치하므로 일부 업데이트가 손실될 수 있습니다.

언급URL : https://stackoverflow.com/questions/48209452/when-to-use-functional-setstate