막후의 반응.

막후의 반응
궁금하지 않아요?🤔 React가 배후에서 무엇을 했는지, 그리고 그것이 어떻게 우리를 위해 이렇게 많은 일을 했는지...?
그래, 이 블로그는 나의 호기심에서 나온 것이다. 페이스북 개발자가 어떻게 이 기묘한 것을 창조했는지, 그것은 인터넷 세계에서 혁명을 일으켰다.
react에 자기만의 DOM이 있다는 거 알아!그래, 알았어!브라우저와 같습니다!
네.너는 아마 그것이 매우 좋다고 생각할 것이다.그런데 왜 누군가가 추가 DOM을 필요로 합니까?
최종적으로 브라우저의 DOM에 어떤 변화가 발생할 수 있습니까?
맞아요.하지만...우리는 몇 가지 관건을 이해해야 한다.
구성 요소의 상태가 변경될 때마다 DOM은 코드를 다시 보여 주고 브라우저는 화면의 모든 요소를 다시 그려야 합니다.이것은 대량의 수학과 기타 계산과 관련된다.
규모적으로 볼 때, 우리 응용 프로그램은 여러 가지 상태 변화가 있을 것이다.
따라서 Google 브라우저는 전체 DOM에 대해 불필요한 순환을 했고 한 요소의 상태만 변화했습니다.따라서 다시 그려야 할 항목이 많을수록 프로그램의 실행 속도가 느려진다.
이것이 바로 리액트가 가상 DOM을 가진 이유다.
브라우저 DOM의 실제 변경 사항을 최소화하는 데 도움이 됩니다.어떻게 써요?
어디 보자.
처음에는 가상 DOM이 실제 DOM의 정확한 복사본이 됩니다.
React에서는 구성 요소의 상태가 변경되면 이러한 변경 사항이 가상 DOM에 반영됩니다.
따라서 가상 DOM에는 구성 요소의 업데이트 상태가 있습니다.
지금 검사하고 있어요.

if(VirtualDOM === Browsers DOM) {
    just chill man!
}
else {
    update the browsers DOM only where that component has changed.
}

이것은 어떤 확산 알고리즘을 고차원적으로 개술한 것이다.
따라서 브라우저의 작업량이 크게 줄어들었기 때문에, 지금은 우리가 더욱 빨리 응용 프로그램을 불러올 수 있도록 도와줄 것이다.
React에서 DOM을 업데이트하는 프로세스를 조정이라고 합니다.
이런 화해는 두 단계로 나뉜다.
렌더링 단계
제출 단계

렌더링 단계
렌더링 단계에서는 JSX를 javascript 표현으로 변환합니다.이것이 바로 가상 세계다.

제출 단계
제출 단계는 실제로 이런 표현을 채택하여 실제 DOM에 적용한다.
제출 단계는 React가 DOM을 실제로 접하고 변경하는 단계입니다.
중요한 점은 다음과 같습니다.
여러 상태 변경 사항이 있는 경우 React에서 상태 변경 사항을 하나씩 제출하지 않습니다.
반대로
React는 가상 DOM을 옮겨다니며 실제 DOM에 대한 변경 목록을 만들고 한 프로세스에서 모든 변경 사항을 완성합니다.
화사한 말로 리액트는 대량 업데이트를 진행한다.
그래서 모든 부분을 함께 놓고,
조정 = 렌더링 + 차이점은 + 커밋 사이에서 발생합니다.
상태가 변경되지 않으면 렌더링이 발생하더라도 커밋이 실행되지 않습니다.
이제 화해를 이해했으니 차이는 어떻게 일을 하는지, 그리고 차이에 영향을 미치는 다른 요소를 알아보자.
React 는 검색을 시작하는 데 주력합니다.간단하게 말하면 계발식 검색은 검색 관련 지식을 가진 기술이다.
따라서 React의 가정(지식)은 다음과 같습니다.
두 가지 서로 다른 유형의 원소는 서로 다른 나무를 만들 수 있다.
안정적으로 다시 렌더링하기 위해서는 하위 요소에 관건적인 도구가 필요합니다.(참조 파일)
뿌리 원소가 다른 유형이 있다면,
처음에는 이랬어요.

<h1>Hello React</h1>

그리고 저희가 얘를 바꿔볼게요.

<p>Hello React</p>

리액트는 오래된 나무를 파괴하고 처음부터 새 나무를 지을 것이다.모든 아이도 멸망할 것이다.
늙은 나무 폐기=>와 관련된 모든 상태가 사라졌습니다.

같은 유형의 DOM 요소
같은 유형의 두 React DOM 요소를 비교할 때 React는 변경된 속성만 업데이트합니다.
스타일을 업데이트할 때도 마찬가지다.
예를 들면 다음과 같습니다.

<h1 className="hero">Hello React</h1>

... 로 바꾸다

<h1 className="header">Hello React</h1>

속성만 변경할 때 DOM 노드 = > 상태 유지 = > 구성 요소가 페이지에 이미 있습니다. = > DOM은 보기에서 DOM 스타일을 다시 그릴 필요가 없습니다.이것이 바로 반응을 매우 빠르게 하는 원인이다!

동일한 유형의 어셈블리 요소

Now we are on COMPONENTS of same type. Earlier it was DOM elements of same type.

docs가 쓴 내용을 반복하지 않고react docs를 읽습니다.여기에는 이미 간단한 예로 이 점을 잘 설명하였다.
이것이 바로 나의 블로그다!
만약 네가 이 문장이 유용하다고 생각한다면 반드시 이 문장에 회답해야 한다. 이 문장은 내가 더 많은 문장을 쓰도록 격려한다.만약 당신에게 어떤 의견이나 수정이 있다면, 이 글을 개선할 수 있다면, 나는 그들을 받아서 매우 기쁠 것입니다.시간 내주셔서 감사합니다.👋🏼 💙.