React 세션 사용 안 함

다음 기사를 읽고 자신이 신경 쓰는 것을 검증한 결과 자신의 생각을 명확히 하기 때문에 적었다.
https://zenn.dev/uhyo/articles/usememo-time-cost
웹의 경우 없음, React Native에서의 검증 등은 하지 않았습니다.

TL;DR

스타일은 적용되지 않지만 React 세션을 사용하면 느려집니다.

앞에서 보도한 바와 같이div를 줄이기 위해 React 세션을 사용하는 것은 반효과이기 때문에 멈추세요

기준은 평균치가 아니라 중앙치나 중심 블록으로 비교

기준과 제품 구축을 비교

React 세션은 무엇입니까?

https://ja.reactjs.org/docs/fragments.html
이런 놈이야.

function Fragment() {
  return (
    <>
      <p>ひとつめ</p>
      <p>ふたつめ</p>
    </>
  );
}

React 구성 요소는 루트 요소가 하나만 제한되어야 하기 때문에 React 세션으로 요약할 수 있습니다.
대체 수단이라기보다는div로 자연스럽게 쓰는 게 낫다.

function Div() {
  return (
    <div>
      <p>ひとつめ</p>
      <p>ふたつめ</p>
    </div>
  );
}

이런 상황에서 긍정div이 비교적 무거운 처리라는 것을 명확히 했다.

기준 결과

https://github.com/januswel/react-benchmark
다음은 제품 구축 후 검증한 것입니다.Div와 Fragment의 항목을 비교해 보세요.

median은 중간값이고 p70은 70점 블록입니다.
중간값은 같은 값이지만 70 구역에서는 React 세션을 사용하는 구성 요소가 대폭 증가했습니다.이게 더 불안정해.조금만에 끝나는 경우도 있지만 대부분div보다 시간이 더 많이 걸린다.

중치와 70점 블록을 비교하다

그럼 왜 중치와 70점 블록을 비교해야 합니까?
브라우저뿐만 아니라 다양한 프로그램과 I/O가 실행되는 컴퓨터에서 이런 사소한 기준을 얻은 상황에서 사소한 일로 수치가 변동할 수 있다.평균치는 이런 수치 변동의 영향을 받기 쉬우므로 단순 비교는 피하자.
중앙값이 편차값에 대한 영향이 비교적 작다. 즉, 변동이 있는 환경에서 측정하는 성능 비교에 적합하다는 것이다.
또한 어느 정도까지 안정적으로 처리할 수 있는지에 대해서는 평균치 부근의 값이 분산되어 있음을 나타내는 방차를 사용할 수 있는데 이는 평균치와 마찬가지로 편차치의 영향을 받기 쉬우므로 블록을 사용한다.
개인은 컴퓨터에서의 측정에서 측정 값이 비교적 높은 주파수로 변동할 수 있기 때문에 99개의 구역과 95개의 구역은 편차 값의 영향을 소홀히 해서는 안 된다고 생각한다.그래서 이 글은 70개 구역으로 비교했다.

제품 구축에서 비교

실제 사용 환경에 가까운 조건에서 즐거울 수 있기 때문이다.
참고로 프로덕션react-scripts 호스트를 구축하지 않았을 때의 결과는 다음과 같다.

중간값도 React 세션의 값이 크다.
70개의 구역의 값은 어느 결과든지 +0.05 정도이다.기준 수치가 비교적 낮기 때문에 제품 구축에서 이 차이는 매우 큰 영향을 미칠 수 있다.

기준 획득 방법

이 일대를 보세요.
https://github.com/januswel/react-benchmark/blob/main/src/BenchmarkSuite.jsx
react-component-benchmark 포장 편리하지만 이런 느낌으로 유틸리티를 보완하면 평소 쓰기 좋다.

덤

베이스라인, 유즈메모, 엑스트라디브는 원문과 같은 내용을 보정해 얻은 수치다.제품 빌딩에서는 여분의 div에 대해 신경질적으로 변할 필요가 없다.
어느 시점에서 기준을 잡으면서 팩스를 보내면 되잖아요.