중요한 React 개념-JS 튜토리얼-php.cn

중요한 React 개념

Susan Sarandon

풀어 주다： 2024-10-17 06:34:02

원래의

598명이 탐색했습니다.

Important React Concepts

중요 React 개념

1- 반응 후크

useReducer를 사용하여 복잡한 상태 구조를 관리할 수 있고, 구성 요소를 외부 시스템과 동기화할 수 있는 React Hook에 useEffect할 수 있습니다. 성능 최적화를 위해 useCallback/ useMemo를 하고, DOM 액세스를 위해 useRef하고, 사용자 정의 후크를 생성할 수 있습니다.

2. 렌더 소품 패턴

구성요소의 재사용성을 높이는 또 다른 방법은 렌더 소품 패턴을 사용하는 것입니다. 렌더링 소품은 JSX 요소를 반환하는 함수인 구성 요소의 소품입니다. 구성 요소 자체는 render prop 외에는 아무것도 렌더링하지 않습니다. 대신, 구성 요소는 자체 렌더링 논리를 구현하는 대신

render prop을 호출합니다.

3. 서스펜스

Suspense

를 사용하면 해당 하위 항목의 로드가 완료될 때까지 대체를 표시할 수 있습니다.

예
:

<Suspense fallback={<Loading />}>
  <SomeComponent />
</Suspense>

로그인 후 복사

4. 오류 경계

오류 경계

는 구성 요소 트리를 감싸고 해당 구성 요소 내의 오류가 확산되어 전체 애플리케이션이 충돌하는 것을 방지하는 React 전용 구성 요소입니다.

이를 사용하려면 보호하려는 구성 요소 트리를 오류 경계 구성 요소로 간단히 래핑해야 합니다. 오류 테두리는 오류를 감지하고 래핑된 구성 요소 트리 내에서 오류가 발생할 때 대체 UI를 표시합니다.

예
:

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;
  }
}


<ErrorBoundary fallback={<p>Something went wrong</p>}>
  <Profile />
</ErrorBoundary>

로그인 후 복사

5. 상황에 맞는 데이터 전달

일반적으로 props를 통해 상위 구성 요소의 정보를 하위 구성 요소로 전달합니다. 그러나 소품을 전달하는 것은 중간에 있는 많은 구성 요소를 통해 전달해야 하거나 앱의 많은 구성 요소에 동일한 정보가 필요한 경우 장황하고 불편할 수 있습니다. 컨텍스트를 사용하면 상위 구성 요소가 props를 통해 명시적으로 전달하지 않고도

깊이에 상관없이 일부 정보를 그 아래 트리의 모든 구성 요소에서 사용할 수 있도록 할 수 있습니다.

6. 상태 관리

상태 관리는 동적 사용자 인터페이스 구축을 위해 전 세계에서 가장 인기 있는 JavaScript 라이브러리인 React의 중요한 개념입니다.

Redux를 사용하여 애플리케이션 상태를 관리합니다.

7. 코드 분할

번들링은 훌륭하지만 앱이 성장함에 따라 번들도 성장할 것입니다. 특히 대규모 타사 라이브러리를 포함하는 경우. 번들에 포함하는 코드를 주의 깊게 관찰하여 실수로 코드를 너무 크게 만들어 앱을 로드하는 데 오랜 시간

이 걸리는 일이 없도록 해야 합니다.

큰 번들으로 마무리되는 것을 방지하려면 문제에 앞서 번들을 "분할"하는 것이 좋습니다. 코드 분할은 Webpack, Rollup 및 Browserify(factor-bundle을 통해)와 같은 번들러에서 지원되는 기능으로 여러 번들을 생성할 수 있습니다. 런타임

에 동적으로 로드할 수 있습니다.

코드 분할 앱을 사용하면 현재 사용자에게 필요한 것만 '지연 로드'하여 앱 성능을 크게 향상시킬 수 있습니다. 앱의 전체 코드 양을 줄이지는 못했지만 사용자에게 전혀 필요하지 않은 코드 로드를 방지하고 초기 로드