중요한 반응 개념

1- 후크를 반응합니다

usereducer 를 사용하여 복잡한 상태 구조를 관리 할 수 ​​있습니다. USECALLBACK / USEMEMO 성능 최적화를 위해 DOM 액세스를 위해 aseref 를 만들 수 있습니다. 2. 렌더링 소품 패턴

구성 요소를 매우 재사용 할 수있는 또 다른 방법은

을 사용하는 것입니다. 렌더 소품은 구성 요소의 소품이며 값은 jsx 요소 를 반환하는 함수입니다. 구성 요소 자체는 렌더 소품 외에는 아무것도 렌더링하지 않습니다. 대신, 구성 요소는 단순히 자체 렌더링 로직 을 구현하는 대신 렌더 소품 을 호출합니다. 3. 서스펜스

아이들이 짐을 싣기 전까지 폴백을 표시 할 수 있습니다.

:
}> 서스펜스>

}>
  

는 구성 요소 트리를 감싸고 해당 구성 요소 내의 오류가 확산되어 전체 애플리케이션이 충돌하는 것을 방지하는 반응 특정 구성 요소입니다. 그것을 사용하려면 오류 경계 구성 요소로 보호하려는 구성 요소 트리를 랩핑해야합니다. 오류 테두리는 랩핑 된 구성 요소 트리 내에서 발생할 때 오류를 감지하고 폴백 UI를 표시합니다.

:
Class ErrorBoundary 확장 rect.component { 생성자 (소품) { 슈퍼 (소품); this.state = {haserror : false}; } static getDerivedStateFromError (오류) { // 상태를 업데이트하여 다음 렌더가 폴백 UI를 표시합니다. return {haserror : true}; } componentDidCatch (오류, 정보) { // "componentStack"예제 : // 구성 요소에서 (앱에 의해 생성) // ErrorBoundary (앱에 의해 생성) // div에서 (앱에 의해 생성) // 앱에서 logerrortomyservice (error, info.componentStack); } 렌더 () { if (this.state.haserror) { // 사용자 정의 폴백 UI를 렌더링 할 수 있습니다 이 this.props.fallback; } this.props.children; } } 무언가 잘못 되었음

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // Example "componentStack":
    //   in ComponentThatThrows (created by App)
    //   in ErrorBoundary (created by App)
    //   in div (created by App)
    //   in App
    logErrorToMyService(error, info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return this.props.fallback;
    }

    return this.props.children;
  }
}


Something went wrong}>
  

일반적으로

를 통해 부모 구성 요소에서 자식 구성 요소로 정보를 전달합니다. 그러나 소품을 통과하는 소품은 중간에 많은 구성 요소를 통과해야하거나 앱의 많은 구성 요소가 동일한 정보가 필요한 경우 장악하고 불편할 수 있습니다. Context 상위 구성 요소가 그 아래의 트리의 모든 구성 요소에 정보를 사용할 수있게 해주겠습니다. 6. 국가 관리 State Management는 역동적 인 사용자 인터페이스를 구축하기 위해 세계에서 가장 인기있는 JavaScript 라이브러리에서 중요한 개념입니다. Redux를 사용하여 응용 프로그램 상태를 관리합니다.

7. 코드 스플릿

번들링

타사 라이브러리를 포함하는 경우

번들 에 포함하는 코드를 주시해야하므로 실수로 너무 커지지 않도록 앱이 를로드하는 데 오랜 시간이 걸리지 않도록해야합니다. 큰 번들 로 감기를 피하기 위해 문제를 극복하고 번들을“분할”하기 시작하는 것이 좋습니다 번들 .

는 webpack , , 롤업 및 와 같은 번들러가 지원하는 기능입니다. Code-Splitting 앱은 사용자가 현재 필요한 것만 "게으른로드"하는 데 도움이되므로 앱의 성능을 크게 향상시킬 수 있습니다. 앱에서 전체 코드 양을 줄이지 않았지만 사용자가 필요로하지 않는로드 코드를 피하고 초기로드 . 동안 필요한 코드의 양을 줄였습니다. 결론

의 고급 개념에 대해 썼습니다. 이러한 고급 개념은 React Applications 에서 성능 및 유지 관리를 향상시킵니다. 기본적 으로이 개념을 이해하고 사용할 수 있습니다