React 함수식 구성 요소의 성능 최적화 사고방식 상세

사고방식을 최적화하다.

주요 최적화 방향은 다음과 같습니다.

다시 렌더링하는 횟수를 줄입니다.React에서 가장 무거운(시간이 가장 오래 걸리는) 부분은 Reconction (간단하게 diff로 이해할 수 있음) 이기 때문에, Render가 없으면reconction이 없기 때문에..

계산의 양을 줄이다.주로 중복 계산을 줄이고 함수식 구성 요소에 대해 말하자면, 매번render는 다시 처음부터 함수 호출을 실행합니다

클래스 구성 요소를 사용할 때 사용하는 React 최적화 API는 주로 shouldComponentUpdate와 PureComponent
그러면 함수식 구성 요소에서 우리는 어떻게 성능 최적화를 합니까?주로 아래의 몇 가지 방법으로 최적화하다

React.memo

useCallback

useMemo

React.memo

예를 들어 다음과 같이 하십시오.
상위 어셈블리에 하위 제목을 수정하고 Child 하위 어셈블리를 가져오는 단추를 놓습니다.
보실 수 있습니다. 서브어셈블리가 처음으로 콘솔을 인쇄했습니다.log ("나는 서브어셈블리")
하위 제목 수정을 누르면 Child 하위 구성 요소도 인쇄되어 불필요한 반복 렌더링 횟수가 발생합니다

// 
import {useState} from 'react'

import Child from "./Child";
const Index = ()=>{
    const [subTitle, setSubTitle] = useState(' ')
    const updateSubTitle = ()=>{
      setSubTitle(' ')
    }
    return (
      <div>
        <div> </div>
        <div>{subTitle}</div>
        <button onClick={updateSubTitle}> </button>
        <Child/>
      </div>
    );
  }
  
  export default Index;


// Child.js
const Child = ()=>{
    console.log(' ')
    return (
        <div> </div>
    )
}
export default Child

최적화, React를 사용합니다.memo 패키지 서브어셈블리

import React from "react";

const Child = ()=>{
    console.log(' ')
    return (
        <div> </div>
    )
}
export default React.memo(Child)

다시 살펴보니 Child 서브어셈블리가 반복 렌더링되지 않았습니다.

useCallback

여기서 우리는 다시 개조하여 Child 하위 구성 요소에 onclick 이벤트를 추가한 다음에 하위 제목 수정 단추를 누르면 우리의 Child 하위 구성 요소가 다시 렌더링된 것을 발견할 수 있습니다. 여기는 주로 하위 제목을 수정할 때handlerClick 함수가 다시 렌더링되어 하위 구성 요소가 다시 렌더링되었기 때문입니다.

//  
const Index = ()=>{
    const [subTitle, setSubTitle] = useState(' ')
    const updateSubTitle = ()=>{
      setSubTitle(' ')
    }
    const handlerClick = ()=>{
      console.log(' ')
    }
    return (
      <div>
        <div> </div>
        <div>{subTitle}</div>
        <button onClick={updateSubTitle}> </button>
        <Child onClick={handlerClick}/>
      </div>
    );
  }

// Child 
const Child = (props)=>{
    console.log(' ')
    return (
        <div>
            <div> </div>
            <button onClick={props.onClick}> </button>
        </div>
    )
}
export default React.memo(Child)

최적화합니다. useCallback 패키지로 하위 구성 요소를 처리하는 handlerClick 함수를 사용하고 updateSubTitle을 다시 눌러 하위 제목을 수정합니다. 어린이 하위 구성 요소가 다시 렌더링되지 않았습니다.

//  
const Index = ()=>{
    const [subTitle, setSubTitle] = useState(' ')
    const updateSubTitle = ()=>{
      setSubTitle(' ')
    }
    const handlerClick = useCallback(()=>{
      console.log(' ')
    },[])

    return (
      <div>
        <div> </div>
        <div>{subTitle}</div>
        <button onClick={updateSubTitle}> </button>
        <Child onClick={handlerClick}/>
      </div>
    );
  }
  
  export default Index;

여기 use Callback 사용법에 대해서.

const callback = () => {
  doSomething(a, b);
}

const memoizedCallback = useCallback(callback, [a, b])

함수와 의존항을 매개 변수로 useCallback에 전송하면 이 리셋 함수의 memoized 버전으로 되돌아옵니다. 이 memoizedCallback은 의존항에 변화가 있을 때만 업데이트됩니다.

useMemo

결과 캐시를 계산하는 데 usemo 사용
우리는 먼저 예를 들어 이전의 기초 위에calcCount 계산 함수를 추가한 다음에 updateSubTitle 업데이트 하위 제목을 클릭하면calcCount가 다시 계산된 것을 발견할 수 있다. 즉, 매번 렌더링할 때마다 중복 계산이 발생하는데 계산량이 비교적 많은 경우 성능에 큰 영향을 미칠 수 있다

//  
const Index = ()=>{
    const [subTitle, setSubTitle] = useState(' ')
    const updateSubTitle = ()=>{
      setSubTitle(' ')
    }
    const handlerClick = useCallback(()=>{
      console.log(' ')
    },[])

    const calcCount = ()=>{
      
      let totalCount = 0
      for(let i=0;i<10000;i++){
        totalCount+=i
      }
      console.log('totalCount',totalCount)
      return totalCount
    }

    const count = calcCount()

    return (
      <div>
        <div> </div>
        <div>{subTitle}</div>
        <button onClick={updateSubTitle}> </button>
        <div>count:{count}</div>
        <Child onClick={handlerClick}/>
      </div>
    );
  }

최적화, usemomo 캐시 계산 결과를 사용합니다. 업데이트SubTitle 수정 하위 제목 단추를 다시 누르면 calcCount 함수가 다시 계산되지 않는 것을 발견할 수 있습니다

 const calcCount = ()=>{
      
      let totalCount = 0
      for(let i=0;i<10000;i++){
        totalCount+=i
      }
      console.log('totalCount',totalCount)
      return totalCount
    }

    const count = useMemo(calcCount,[])

마지막으로 주의해야 할 것은 usemomo를 맹목적으로 사용해서는 안 된다는 것이다. 구체적인 장면에 따라 예를 들어 하나의 데이터에 대한 계산량이 비교적 많으면 사용은 비교적 적용되는 것이고 일반적인 계산에 대해서는 사용하지 않아도 된다. 왜냐하면 그 자체의 usemomo도 약간의 성능을 소모하기 때문에 맹목적으로 사용하면 오히려 그 반대에 적합하기 때문이다.

참고 읽기

https://mp.weixin.qq.com/s/YGvmSrr-yhPUNHbwlLSFsA
http://www.ptbird.cn/react-hook-useMemo-purerender.html
이 글은 React 함수식 구성 요소의 성능 최적화에 관한 것입니다. 더 많은 React 성능 최적화 내용은 저희 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보십시오. 앞으로 많은 응원 부탁드립니다!