React 응용 프로그램의 성능을 향상시키는 5개의 빠르고 간편한 복구 프로그램🚀

만약 React로 웹 응용 프로그램을 만든 적이 있고, 다른 플랫폼/브라우저/인터넷 등에서의 성능을 걱정했다면, 그 성능을 봐야 한다. create-react-app 명령을 실행할 때 사용자 인터페이스를 구축하는 데 사용되는 자바스크립트 라이브러리가 이 명령을 실행할 때 최적화되었을 가능성이 높다.그렇다면 왜 우리는 다시 성능을 검사해야 합니까?
공평하게 말하자면, 사령부는 이미 너의 절반의 일을 완성했다.지금 당신의 응용 프로그램이 이미 생산에 들어갔다고 생각해 보세요. 수천 명이 사용할 수 있는 전자책 상점을 만들었습니다. 그들은 장부 기재, 쇼핑, 쇼핑카트에 물건을 추가하고 물건을 볼 수 있습니다.이렇게 많은 번거로운 작업이 생겼는데 서로 다른 조건에서 테스트를 통해 우리의 웹 응용 프로그램을 강화하는 것은 의미가 있다. 예를 들어 네트워크 속도가 비교적 느린 저단 이동 장치에서 그것을 모의하는 것이다.어쨌든 사용자 체험이 가장 중요합니다!
다음 5가지 복구 중 반응이 느리거나 반응이 빠르지 않은 React 응용 프로그램을 개선하는 방법을 살펴보겠습니다.

일.️⃣ 코드 분할

물론 내장Webpack이기 때문에 자연반응도 있다.전자책 응용 프로그램을 예로 들자.이 사이트를 처음 방문했을 때, 이 사이트를 실행하는 데 사용되는 모든 자바스크립트 코드를 다운로드했습니다.네비게이션 페이지가 4-5개라도 브라우저는 전체 프로그램의 바이트당 데이터를 가져옵니다.만약 우리가 이 제한을 사용자가 특정 페이지를 필요로 할 때, 필요한 코드만 불러오거나 가져오면 어떻게 합니까?

Code splitting is the way which allows you to split your code into various bundles which can then be loaded on-demand.

이런 방법을 사용하면 우리는 더 작은 데이터 패키지를 얻을 수 있고, 어디에 어떤 구성 요소를 불러올지 우선순위를 정할 수 있다.이 모든 것이 정확하게 실현되면 전체 응용 프로그램에 큰 영향을 미칠 것입니다.
우리는 사용할 수 있다React.lazy😴 및 Suspense🚟 발생시키다.Reactlazy는 일반적인 구성 요소 형식으로 구성 요소를 동적으로 렌더링할 수 있는 구성 요소입니다import.

저희가 이렇게 했어요.💪
만약 우리가 HomePage 구성 요소를 가지고 있다면, 우리는 렌더링을 늦추기를 원한다. 우리는 그것을 다음과 같이 전달할 것이다.

const LazyHomePage = lazy(() => import('.pages/homepage/homepage.component'));

lazy 동적 import() 을 호출하는 함수를 받아들여 구성 요소로 전달하는 경로입니다.다음은 지금까지 작성하고 있는 실제 가져오기 문장을 삭제해야 합니다.지금 왔어요Suspense.이것은 일부 조건이 충족될 때까지 프로그램 트리의 일부분을 렌더링하는 데 사용됩니다.위에서 만든 LazyHomePage 구성 요소는 다음과 같이 새 블록<Suspense />에서 사용할 수 있습니다.

...
<div>
    <Suspense fallback={<CustomLoader />}>
        <LazyHomePage />
    </Suspense>
</div>
...

위의 속성은 HTML 요소나 다른 구성 요소를 가리킬 수 있습니다.내가 본 가장 좋은 용례는 사용자가 응용 프로그램에서 한 페이지에서 다른 페이지로 내비게이션할 때 fallback 를 CustomLoader 로 표시하는 것이다.

그냥 사용자 분들이 그러지 말라고.ヾ(≧ ▽ ≦)ゝfallback에 대한 자세한 내용은 Eyal Eizenberg의 글을 참조하십시오.

Webpack Analyzer를 사용하여 패키지 속 지방 손질 & 게으름/염려 반응

에얄 에센버그・ 2019년 12월 26일・ 9분 읽기 다음 단계.io

이.️⃣ 오차 경계

백엔드 서버에서 데이터를 가져올 때 사용자는 인터넷 문제가 있는 것 같아서 도서 대금을 처리할 수 없습니다. 어떻게 해야 합니까?사실상, 만약 오류가 다시 발생한다면, 우리는 확실히 그것을 처리할 것이 필요하다. 왜냐하면 당신이 이전에 한 Suspense 일이 이런 상황에서 어떻게 해야 할지 모르기 때문이다.
잘못된 경계에서 구원까지!🦸‍♂️ 이것은 고객이 온라인 상점을 방문할 때 발생하는 오류가 아니라 오류를 포착하고 환불 인터페이스를 보여주는 독특한 구성 요소를 작성하는 방법입니다.

Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed.

클래스 구성 요소 정의 Suspense 또는 getDerivedStateFromError() 생명주기 방법을 사용하면 오류 경계로 쉽게 변환할 수 있습니다.요컨대, componentDidCatch() 오류가 발생한 후 반환 UI를 표시하는 데 사용되고, getDerivedStateFromError() 오류 정보를 콘솔에 로그아웃하는 데만 사용됩니다.

저희가 이렇게 했어요.💪
우리 구성 요소의 국부 상태에서 우리는 componentDidCatch()라는 볼 속성을 가지고 있으며, 이것은 우리로 하여금 상태에 오류가 있는지 알게 한다.처음에 이것은 잘못된 것이다.우리의 hasError 방법에서 우리는 이렇게 한다.

static getDerivedStateFromError(error) {
    // Process the error here
    return { hasError: true };
  }

이것은 getDerivedStateFromError() 파라미터를 기본값으로 하고, 우리는 로컬에서 설정할 새로운 상태를 표시하는 대상을 되돌려줍니다.componentDidCatch()에 대해 우리는 간단하게 error 를 사용할 수 있다. 현재 우리는 조건부로 다른 UI를 되돌려 주기를 원한다. 이것은 로컬 상태의 console.log(error); 속성이 hasError 인지 true 인지에 달려 있다.우리는 이렇게 했다.

render() {
    if(this.state.hasError) {
        return <ErrorComponent />
    }
    return this.props.children;
}

우리는 이와 유사한 레이아웃을 포함할 수 있는 false 을 되돌릴 수 있다...

마지막으로, 우리는 ErrorComponent 위에서 작성한 이 새 Suspense 구성 요소에 봉인할 수 있다.

삼.️⃣ 구성 요소 수준 최적화

이것은 다음과 같이 나눌 수 있다.

ErrorBoundary

shouldComponentUpdate

React.memo

React.PureComponent는 클래스 구성 요소에서 액세스할 수 있는 라이프 사이클 방법입니다.그것은 두 개shouldComponentUpdate와 nextProps를 수신한다.응용 프로그램의 불필요한 재렌더링을 피하고 싶을 때, 이것은 매우 편리하다.다음은 작은 예입니다.

shouldComponentUpdate(nextProos, nextState) {
    console.log('method called', nextProps);
    return nextProps.text !== this.props.text;
}

새 도구나 상태를 수신하면 렌더링하기 전에 이 방법을 사용합니다.nextState 우리가 잠시 후에 토론할 React.memo 과 유사하다.주요 차이점은 기능 구성 요소에 사용되고 후자는 클래스 기반 구성 요소에 사용된다는 것이다.간단히 말하면:

It allows the component to check the old props against new ones to see if the value has changed or not.

저희가 이렇게 했어요.💪PureComponent은Higher-Order Component (HOC)이므로 다른 HOC와 마찬가지로 구성 요소를 React.memo 내부로 전달하여 memoizing를 시작할 수 있습니다.

export default React.memo(BooklistComponent)

마지막으로 React.memo()는 React.PureComponent의 생명주기 방법을 제공하고 간단한 속성과 상태 비교를 통해 이를 실현했다.shouldComponentUpdate() 함수가 같은 속성과 상태에서 같은 결과를 출력할 때 일반적인 React.PureComponent 대신 React.Component 을 사용해야 한다.이것은 틀림없이 React 응용 프로그램의 성능을 향상시킬 것이다.

사.️⃣ React 연결 사용

성능 문제를 해결하는 두 가지 주요 연결은 다음과 같습니다.

render()

useCallback()

The useCallback hook allows us to memoize a function that we wrap in it and use that same function if it already exists.

문법상 그것은 두 가지 논점이 있다.첫 번째는 우리가 기억하고 싶은 함수이고, 두 번째는 일련의 의존항이며, 그것은 필수적이다.함수가 컨텐트에 의존하지 않으면 다음과 같이 빈 그룹만 전달됩니다.

const loggerFunction = useCallback(() => console.log('This logs via useCallback'), []);

기억하는 바와 같이, 의존 항목이 변경될 때만 이 리셋이 변경됩니다.이것은 다른 구성 요소에 의존하는 하위 구성 요소를 최적화하여 구성 요소를 다시 렌더링하는 것을 방지하고 불러오는 시간을 단축하는 데 도움이 될 것입니다!

The useMemo hook is especially useful when you want to avoid expensive calculations on render. It only recomputes the memoized value when one of the dependencies has changed.

저희가 이렇게 했어요.💪
만약 우리가 함수가 하나 있다고 가정한다면, 그것은 반드시 복잡한 계산을 해야 한다. useMemo() 갈고리 전에:

const aComplexFunction = () => {
    console.log("I'm computing a complex problem!");
    return ((firstNum * 1000) % 15.6) * 8340 - 5489;
}

이것은 연결 후:

const aComplexFunction = useMemo(() => {
    console.log("I'm computing a complex problem!");
    return ((firstNum * 1000) % 15.6) * 8340 - 5489;
}, [FirstNum]);

useMemo처럼 이것도 일련의 의존항이 필요하다.배열 값이 제공되지 않으면 각 렌더링에서 새 값이 계산됩니다.

오.️⃣ React Profiler 사용

It's a component that allows us to check how much time (or cost) it takes for our component to render or mount.

확장된 Profiler 탭을 사용한 경우React Dev Tools와 유사합니다.

저희가 이렇게 했어요.💪
우리는 우리가 원가를 평가하고자 하는 어떤 부분을 둘러싸기만 하면 된다.그것은 두 가지 속성을 가지고 있다.첫 번째는 useCallback (문자열) 입니다. 이것은 표지부호입니다. 어떤 탐색기가 어떤 구성 요소를 기록하고 있는지 구분하는 데 사용됩니다. 왜냐하면 탐색기는 여러 구성 요소에서 사용할 수 있고, 두 번째는 id 라는 리셋 함수로 여러 개의 참수를 받아들일 수 있기 때문입니다.그 중에서 가장 흔히 볼 수 있는 것은 onRender, id, (마운트 또는 업데이트) 및 phase (어셈블리를 렌더링하는 시간 (밀리초) 입니다.

<Profiler id="Homepage" onRender={(id, phase, actualDuration) => {
  console.log({id, phase, actualDuration});
  }}>
  <HomePage />
</Profiler>

더 많이 읽으세요!

https://reactjs.org/docs/optimizing-performance.html

https://medium.com/myheritage-engineering/how-to-greatly-improve-your-react-app-performance-e70f7cbbb5f6

https://www.codementor.io/blog/react-optimization-5wiwjnf9hj

너 왔구나!나는 내가 정확한 방식으로 이 다섯 가지 복구를 해석하기를 바란다.이것은 나의 첫 번째 React에 관한 글입니다. 만약 당신이 어떤 오류나 건의를 발견한다면 언제든지 평론에 쓰십시오!😁
댓글이 중요하다고 생각하지 마세요...🤭출처: https://t.co/A8UgpqYkLipic.twitter.com/LSJCtRBFyY - Microsoft 개발자 영국(@msdevUK)

📫 나의 매주 개발자 통신에 구독하다📫

PS: 올해부터 저는 이곳에 지역사회 개발에 관한 글을 쓰기로 했습니다.전에 언론에 썼어요.내 글을 보고 싶은 사람이 있다면, here 내 미디어 자료다.