모든 선임 개발자가 마스터해야 할 고급 반응 기술

사용자 인터페이스 (특히 단일 페이지 애플리케이션)를 제작하기위한 주요 JavaScript 라이브러리 인 React는 효율적이고 확장 가능하며 유지 관리 가능한 프로젝트를 구축하기위한 고급 기술의 숙달을 요구합니다. 이 기사는 고위 개발자를위한 20 개의 필수 고급 반응 개념을 탐구하며, 관련된 TypeScript 예제로 설명되어 있습니다.

HOCS (Highoder Components) : HOCS는 구성 요소를 취하고 수정 된 버전을 반환하여 코드 재사용 성을 촉진합니다.

렌더링 소품 :
1. 값이 함수 인 소품을 사용하여 구성 요소간에 코드를 공유합니다.

컨텍스트 API :

<code class="language-typescript">import React from 'react';

const withLogger = (WrappedComponent: React.ComponentType) => {
  return class extends React.Component {
    componentDidMount() {
      console.log(`Component ${WrappedComponent.name} mounted`);
    }
    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
};

const MyComponent: React.FC = () => <div>Hello World</div>;
const MyComponentWithLogger = withLogger(MyComponent);</code>

구성 요소 간의 데이터 공유를 용이하게하여 소품 드릴링을 제거합니다.

2. 커스텀 후크 :
상태의 논리를 캡슐화하고 재사용합니다

<code class="language-typescript">import React from 'react';

interface DataFetcherProps {
  render: (data: any) => JSX.Element;
}

const DataFetcher: React.FC<DataFetcherProps> = ({ render }) => {
  const data = { name: 'John Doe' };
  return render(data);
};

const MyComponent: React.FC = () => (
  <DataFetcher render={(data) => <div>{data.name}</div>} />
);</code>

오류 경계 :
3. 구성 요소 트리 내에서 JavaScript 오류를 잡고 처리합니다.
코드 분할 :

코드를 작은 덩어리로 분할하여 초기로드 시간을 개선합니다. (웹 팩, 롤업 등)

<code class="language-typescript">import React, { createContext, useContext } from 'react';

const MyContext = createContext<string | null>(null);

const MyProvider: React.FC = ({ children }) => {
  const value = 'Hello from Context';
  return <MyContext.Provider value={value}>{children}</MyContext.Provider>;
};

const MyComponent: React.FC = () => {
  const value = useContext(MyContext);
  return <div>{value}</div>;
};</code>

4. 메모 화 (usememo) : 고가의 계산을 캐싱하여 성능을 최적화하십시오

포털 :

<code class="language-typescript">import { useState, useEffect } from 'react';

const useFetch = (url: string) => {
  const [data, setData] = useState<any | null>(null);
  useEffect(() => {
    fetch(url)
      .then((response) => response.json())
      .then((data) => setData(data));
  }, [url]);
  return data;
};

const MyComponent: React.FC = () => {
  const data = useFetch('https://api.example.com/data');
  return <div>{data ? data.name : 'Loading...'}</div>;
};</code>

어린이를 Dom의 다른 부분으로 렌더링합니다.

5. 조각 : 그룹 어린이는 추가 DOM 노드를 추가하지 않고 어린이를 그룹화합니다

<code class="language-typescript">import React from 'react';

class ErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError(error: any) {
    return { hasError: true };
  }

  componentDidCatch(error: any, errorInfo: any) {
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

const MyComponent: React.FC = () => {
  throw new Error('Test error');
  return <div>Hello World</div>;
};

const App: React.FC = () => (
  <ErrorBoundary><MyComponent /></ErrorBoundary>
);</code>

refs and the dom : 액세스 DOM 노드 또는 반응 요소.
6. 전달 참조 : Pass Pass는 구성 요소를 통해 자녀에게 ref를 참조하십시오

<code class="language-typescript">import React, { lazy, Suspense } from 'react';

const LazyComponent = lazy(() => import('./LazyComponent'));

const MyComponent: React.FC = () => (
  <Suspense fallback={<div>Loading...</div>}>
    <LazyComponent />
  </Suspense>
);</code>

제어 및 제어되지 않은 구성 요소 :

구성 요소 상태를 외부 또는 내부적으로 관리합니다.
7. 성능 최적화 (React.Memo, Usememo, Usecallback) :
불필요한 재 렌즈를 방지합니다

<code class="language-typescript">import React, { useMemo } from 'react';

const MyComponent: React.FC = ({ items }) => {
  const sortedItems = useMemo(() => items.sort(), [items]);
  return <div>{sortedItems.join(', ')}</div>;
};</code>

8. SSR (Server-Side Rendering) : SEO 및 성능 향상을 위해 서버의 구성 요소 렌더링 서버 렌더링. (Next.js 또는 Remix와 같은 서버 측 프레임 워크가 필요합니다.) 정적 사이트 생성 (SSG) : 빌드 시점에 사전 렌더 페이지. (Next.js, Gatsby 등)

증분 정적 재생 (ISR) :

<code class="language-typescript">import React from 'react';
import ReactDOM from 'react-dom';

const MyPortal: React.FC = () => {
  return ReactDOM.createPortal(
    <div>This is rendered in a portal</div>,
    document.getElementById('portal-root')!
  );
};</code>

빌드 시간 후 정적 컨텐츠를 업데이트하십시오. (다음 .js)

9. 동시 모드 : 응답 성을 향상시키고 중단을 우아하게 처리합니다

<code class="language-typescript">import React from 'react';

const withLogger = (WrappedComponent: React.ComponentType) => {
  return class extends React.Component {
    componentDidMount() {
      console.log(`Component ${WrappedComponent.name} mounted`);
    }
    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
};

const MyComponent: React.FC = () => <div>Hello World</div>;
const MyComponentWithLogger = withLogger(MyComponent);</code>

데이터 가져 오기에 대한 서스펜스 :
18. 데이터 가져 오기 동안 로딩 상태를 선언 적으로 처리합니다.
반응 쿼리 : 데이터 페치, 캐싱 및 동기화 단순화

<code class="language-typescript">import React from 'react';

interface DataFetcherProps {
  render: (data: any) => JSX.Element;
}

const DataFetcher: React.FC<DataFetcherProps> = ({ render }) => {
  const data = { name: 'John Doe' };
  return render(data);
};

const MyComponent: React.FC = () => (
  <DataFetcher render={(data) => <div>{data.name}</div>} />
);</code>

반응 서버 구성 요소 :
19. 클라이언트 측 상호 작용을 서버 측 렌더링 이점과 결합합니다. (Next.js 13과 같이 RSC를 지원하는 프레임 워크가 필요합니다 결론 : 결론 : 이러한 고급 기술을 마스터하면 선임 반응 개발자가 고성능, 유지 관리 및 강력한 응용 프로그램을 만들 수 있습니다. 이러한 전략을 워크 플로에 통합하면 복잡한 프로젝트를 처리하고 탁월한 사용자 경험을 제공 할 수 있습니다.

위 내용은 모든 선임 개발자가 마스터해야 할 고급 반응 기술의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!