React 코드 최적화 가이드: 프런트엔드 애플리케이션의 실행 효율성을 향상시키는 방법-JS 튜토리얼-php.cn

React 코드 최적화 가이드: 프런트엔드 애플리케이션의 실행 효율성을 향상시키는 방법

WBOY

풀어 주다： 2023-09-28 11:34:41

원래의

1009명이 탐색했습니다.

React 코드 최적화 가이드: 프런트엔드 애플리케이션의 실행 효율성을 향상시키는 방법

React 코드 최적화 가이드: 프런트엔드 애플리케이션의 운영 효율성을 높이는 방법

프론트엔드 개발에서 성능 최적화는 항상 중요한 문제였습니다. JavaScript 라이브러리 및 프레임워크 중 현재 가장 널리 사용되는 것은 React이지만, 코드 최적화가 올바르게 수행되지 않으면 성능 문제로 인해 React 애플리케이션이 느리게 실행될 수 있습니다. 이 글에서는 몇 가지 React 코드 최적화 방법을 소개하고 구체적인 코드 예제를 제공합니다.

PureComponent 사용:

React에는 기능적 구성 요소와 클래스 구성 요소라는 두 가지 일반적으로 사용되는 구성 요소가 있습니다. 기능적 구성 요소는 상태가 없으며 일반적으로 클래스 구성 요소보다 성능이 좋습니다. 클래스 구성 요소는 React의 수명 주기 방법과 상태를 사용하여 구성 요소 렌더링을 관리할 수 있습니다. 성능을 향상시키기 위해 React에서 제공하는 PureComponent를 사용할 수 있습니다. PureComponent는 얕은 비교를 통해 컴포넌트의 props와 state가 변경되었는지 비교하여 컴포넌트를 다시 렌더링할지 여부를 결정합니다.

class MyComponent extends React.PureComponent {
  // ...
}

로그인 후 복사

불필요한 재렌더링 방지:

React에서 구성 요소의 재렌더링은 소품이나 상태의 변경에 의해 트리거됩니다. 그러나 모든 소품이나 상태 변경에 대해 구성 요소를 다시 렌더링해야 하는 것은 아닙니다. shouldComponentUpdate 메소드나 React.memo를 사용하면 불필요한 재렌더링을 피할 수 있습니다.

class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    // 比较props或state是否有变化，返回布尔值决定是否重新渲染
  }
}

로그인 후 복사

const MyComponent = React.memo(function MyComponent(props) {
  // 组件的渲染
});

로그인 후 복사

일괄 업데이트 사용:

React에서는 상태가 변경될 때마다 구성 요소가 다시 렌더링됩니다. 성능을 향상시키기 위해 setState 콜백 함수를 사용하여 일괄 업데이트를 구현할 수 있습니다.

this.setState((prevState) => ({ count: prevState.count + 1 }), () => {
  // 在回调函数中进行其他操作
});

로그인 후 복사

컴포넌트 구조 단순화:

컴포넌트 구조가 더 복잡해지면 렌더링 오버헤드가 더 커집니다. 성능을 향상시키기 위해 구성 요소의 구조를 최대한 단순화하고 불필요한 중첩을 제거할 수 있습니다.

React 조각 사용:

React에서는 구성 요소를 div로 래핑하는 것이 매우 일반적입니다. 그러나 추가 div로 인해 렌더링 수준이 증가하여 성능이 저하될 수 있습니다. 불필요한 렌더링 수준을 줄이기 위해 div 대신 React Fragment를 사용할 수 있습니다.

return (
  <React.Fragment>
    <Component1 />
    <Component2 />
  </React.Fragment>
);

로그인 후 복사

지연 로딩 사용:

React에서는 React.lazy 및 Suspense를 사용하여 구성 요소의 지연 로딩을 구현할 수 있습니다. 지연 로딩은 구성 요소 로딩을 지연시켜 초기 렌더링 시간을 줄일 수 있습니다.

const MyComponent = React.lazy(() => import('./MyComponent'))

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <MyComponent />
      </Suspense>
    </div>
  )
}

로그인 후 복사

가상화 기술 사용:

목록의 요소 수가 많으면 React의 렌더링 성능에 영향을 미칠 수 있습니다. 이때, React-Virtualized나 React-Window와 같은 가상화 기술을 활용하여 성능을 최적화할 수 있습니다. 가상화 기술은 눈에 보이는 요소만 렌더링하여 성능을 향상시킵니다.

위는 프론트 엔드 애플리케이션의 운영 효율성을 향상시킬 수 있는 몇 가지 일반적인 React 코드 최적화 방법입니다. 그러나 성능 최적화는 정적이지 않으며 프로젝트마다 다른 최적화 전략이 필요할 수 있습니다. 따라서 개발자는 특정 프로젝트 요구 사항 및 성능 문제를 기반으로 React 애플리케이션의 성능을 향상시키기 위해 적절한 최적화 방법을 선택해야 합니다.

참고자료: