React setState 데이터 업데이트 메커니즘 상세 정보

setState를 사용하는 이유

React의 개발 과정에서 구성 요소의state와 접촉하는 것을 피하기 어렵다.React를 사용한 사람들은 모두 알다시피state의 값을 수정하려면 내부에서 제공하는 setState 방법을 사용해야 합니다.왜 직접 값을 부여하는 방식으로state의 값을 수정할 수 없습니까?먼저 데모를 한 번 봅시다.

class Index extends React.Component {
  this.state = {
    count: 0
  }
  onClick = () => {
    this.setState({
       count: 10
    })
  }
  render() {
    return (
      <div>
        <span>{this.state.count}</span>
        <button onClick={this.onClick}>click</button>
      </div>
    )
  }
}

위 코드에서 볼 수 있듯이 단추를 누르면state의count 값을 10으로 수정합니다.페이지의 표시를 업데이트합니다.따라서state의 변화는 두 가지 작용이 있습니다. 대응하는 값 변화와 **페이지 업데이트입니다. **이 두 가지를 하려면react에서 setState가 아니면 안 됩니다.만약에 우리가 onClick의 방법 내용을 this.state.count = 10 로 수정하고 방법에서 this.state 의 값을 출력한다면state의 값이 바뀌었음을 볼 수 있다.그러나 페이지는 최신 값으로 업데이트되지 않았습니다.☆ 요약:

state 값의 변화는 페이지의 업데이트를 목적으로 합니다. React는 최신state를 사용하여 페이지를 렌더링하기를 바랍니다.그러나 직접 값을 부여하는 방식은 React가state의 변화를 감청할 수 없습니다.

React state의 데이터가 변경되었음을 setState 방법을 통해 알려야 합니다.

☆ 확장:
vue에서 직접 값을 부여하는 방식으로 데이터 데이터를 업데이트하고 Vue도 최신 데이터 데이터로 페이지를 렌더링할 수 있습니다.왜 이러지?vue2에서 사용하는 것은 Object입니다.defineProperty () 방식으로 데이터를 감청하는 get과 set 방법, 데이터 변화를 감청하는 감청은 vue3에서 사용하는 ES6의proxy 방식으로 데이터를 감청하는 변화

setState 사용법

틀림없이 모든 사람들이 setState의 사용법을 알고 있을 것이다. 여기서 기록하고자 한다. setState 방법은 두 가지 파라미터가 있다. 첫 번째 파라미터는 대상이 직접 속성 값을 수정할 수도 있고 함수가 지난번의state 값을 얻을 수도 있다.두 번째 매개 변수는 선택할 수 있는 리셋 함수입니다. 최신state값 리셋 함수는 구성 요소 업데이트가 끝난 후에 실행됩니다. 이것은 componentDidUpdate 생명주기 내에 실행되는 것과 같습니다.

첫 번째 매개 변수가 대상일 때: 위의 데모와 같이state의 속성 값을 직접 수정합니다

this.setState({
	key:newState
})

첫 번째 매개 변수가 함수일 때: 함수 내에서 지난state의 속성 값을 얻을 수 있습니다.

// prevState   state，props   props
this.setState((prevState, props) => {
  return {
      key: prevState.key 
  }
})

비동기식 업데이트 또는 동기식 업데이트

setState () 는 구성 요소state에 대한 변경 사항을 대기열에 입력하고React에서 업데이트된state를 사용하여 이 구성 요소와 하위 구성 요소를 다시 렌더링해야 한다고 알립니다.이것은 사용자 인터페이스를 업데이트하여 이벤트 프로세서에 응답하고 서버 데이터를 처리하는 주요 방식으로 setState () 를 요청으로 간주하는 것이지 구성 요소를 즉시 업데이트하는 명령이 아닙니다.더 좋은 감지 성능을 위해 React는 호출을 지연시키고 한 번에 여러 구성 요소를 업데이트합니다.React는 state 변경이 즉시 적용될 것이라고 보장하지 않습니다.
먼저 위의 코드를 수정합니다. 만약에 onClick 방법에서 setState를 세 번 연속 호출하면 위에서 알 수 있듯이 setState는 비동기적인 방식입니다. 호출할 때마다 대기열에 변경 사항을 추가하고 동기화할 때 마지막 업데이트만 실행하기 때문에 결과는 1이 3이 아닙니다.

onClick = () => {
  const { count } = this.state
  this.setState({ count: count + 1 })
  this.setState({ count: count + 1 })
  this.setState({ count: count + 1 })
}

위 코드를 Object.assign()  방법으로 이해할 수 있습니다.

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

만약 첫 번째 매개 변수가 함수에 전달된다면, 세 번 연속으로 호출된다면, 전달 대상 방식의 결과와 같지 않습니까?

onClick = () => {
  this.setState((prevState, props) => {
    return {
      count: prevState.count + 1
    }
  })
  this.setState((prevState, props) => {
    return {
      count: prevState.count + 1
    }
  })
  this.setState((prevState, props) => {
    return {
      count: prevState.count + 1
    }
  })
}

결과는 전달 대상의 방식과 크게 다르기 때문에 함수를 사용하는 방식은 스스로 3으로 증가하는 효과를 실현할 수 있다.이건 또 왜죠?함수 내에서 최신state와props 값을 얻을 수 있습니다.위에서 알 수 있듯이 setState의 업데이트는 차례로 나뉘어져 있으며 함수를 사용하여 현재state가 지난state 위에 세워진 것을 확보하여 자증3의 효과를 실현하였다.
☆ 요약하자면 왜 setState 방법은 비동기적일까요?

은 성능을 현저하게 향상시킬 수 있다.react16은 Fiber 구조를 도입했고 Fiber에서 임무를 구분하고 우선순위를 분류하여 우선순위가 비교적 높은 임무를 처리했다.페이지의 응답은 우선순위가 비교적 높은 작업이기 때문에 setState가 동기화된다면 한 번 업데이트하면 한 번 업데이트해야 페이지의 응답을 막을 수 있습니다.가장 좋은 방법은 여러 개의 업데이트를 얻은 후에 대량의 업데이트를 하는 것이다.페이지를 한 번만 업데이트합니다.

state를 동기화하지만render 함수를 실행하지 않으면state와props는 동기화를 유지할 수 없습니다.

** 모든 setState가 비동기적인 형태가 아닐까요? **답은 아니오!!!React에서도 setState 동기화 장면이 존재합니다.

onClick = () => {
	this.setState({ count: this.state.count + 1 })
  console.log(this.state)
  setTimeout(() => {
    this.setState({ count: this.state.count + 1 })
    console.log(this.state)
  }, 0)
}

위의 코드는 *0,2를 인쇄합니다. **이건 또 왜죠?사실 React의 setState는 엄격한 의미의 비동기 함수가 아니다.그는 대열의 지연 집행을 통해 실현되었다.isBatchingUpdates를 사용하여 현재 setState가 업데이트 대기열에 추가되었는지 업데이트 페이지에 추가되었는지 판단합니다.isBatchingUpdates=ture  업데이트 대기열에 가입하지 않으면 업데이트를 실행합니다.
React를 사용하여 업데이트 대기열에 가입할지 여부를 판단합니다.그렇다면 왜 isBatchingUpdates 사건에서 setTimeout 값이 isBatchingUpdates 입니까?그 이유는 React에서 HTML의 원래 이벤트를 **합성 이벤트라고 봉인했기 때문입니다.**따라서 React 자체의 생명주기와 합성 이벤트에서 false의 값을 제어하고 값에 따라 페이지를 업데이트할지 판단할 수 있습니다.숙주 환경에서 제공하는 원생 이벤트 (즉 비합성 이벤트) 에서 isBatchingUdates 의 값을false로 설정할 수 없기 때문에 즉시 업데이트를 실행합니다.
☆ 그래서 setState는 동기화된 장면이 아니라 특수한 장면에서 React의 제어를 받지 않습니다**

총결산

setState는 단순한 동기화 함수나 비동기 함수가 아니라 그의 동기화와 비동기화의 표현 차이는 호출된 장면이 다르다는 데 나타난다.React의 라이프 사이클과 합성 이벤트에서 그는 비동기 함수로 표현됩니다.DOM의 원래 이벤트와 같은 비합성 이벤트에서는 동기화 함수로 표시됩니다.
이상은 React setState 데이터 업데이트 메커니즘에 대한 상세한 내용입니다. React setState 데이터 업데이트 메커니즘에 대한 더 많은 자료는 저희 다른 관련 글을 주목해 주십시오!