高級反應技術每個高級開發人員都應掌握

> React是用於製作用戶界面（尤其是單頁應用程序）的領先JavaScript庫，要求掌握高級技術來構建高效，可擴展和可維護的項目。 本文探討了高級開發人員的20個基本高級React概念，並用與您相關的打字稿示例進行了說明。

1. 高階組件（HOCS）：>

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

渲染props：
2. >使用一個值為函數的prop之間的組件之間共享代碼。 >

>

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

上下文api：

促進跨組件的數據共享，消除了道具鑽探。

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

自定義鉤子：

封裝並重複使用狀態邏輯。

錯誤邊界：

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

捕獲並處理組件樹中的JavaScript錯誤。 >

代碼拆分：

>通過將代碼分成較小的塊來提高初始加載時間。 （webpack，lollup等）

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

>回憶（usememo）：

通過緩存昂貴的計算來優化性能。

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

門戶：

>將孩子渲染到dom的另一部分。

<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. 片段：

分組兒童而不添加額外的DOM節點。

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

9. refs和dom：
訪問dom節點或react元素。

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

const MyComponent: React.FC = () => (
  <React.Fragment>
    <div>Item 1</div>
    <div>Item 2</div>
  </React.Fragment>
);</code>

10. 轉發refs：
>通過與孩子的組成部分的通過參考。

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

const MyComponent: React.FC = () => {
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    inputRef.current?.focus();
  }, []);

  return <input ref={inputRef} />;
};</code>

11. 受控和不受控制的組件：
>在外部或內部管理組件狀態。

>

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

const MyInput = forwardRef<HTMLInputElement>((props, ref) => (
  <input {...props} ref={ref} />
));

const MyComponent: React.FC = () => {
  const inputRef = useRef<HTMLInputElement>(null);
  return <MyInput ref={inputRef} />;
};</code>

性能優化（react.memo，usememo，usecallback）：

防止不必要的重新租賃。

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

const ControlledComponent: React.FC = () => {
  const [value, setValue] = useState('');
  return <input type="text" value={value} onChange={(e) => setValue(e.target.value)} />;
};

const UncontrolledComponent: React.FC = () => {
  const inputRef = useRef<HTMLInputElement>(null);
  return <input type="text" ref={inputRef} />;
};</code>

服務器端渲染（SSR）：在服務器上渲染組件以改進SEO和性能。 （需要諸如Next.js或Remix之類的服務器端框架。）

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

const MyComponent: React.FC<{ onClick: () => void }> = memo(({ onClick }) => {
  console.log('Rendering MyComponent');
  return <button onClick={onClick}>Click me</button>;
});

const ParentComponent: React.FC = () => {
  const handleClick = useCallback(() => {
    console.log('Button clicked');
  }, []);

  return <MyComponent onClick={handleClick} />;
};</code>

14. >

    >靜態站點生成（SSG）：構建時間的預渲染頁面。 （next.js，gatsby等）

15. >

    增量靜態再生（ISR）：構建時間後更新靜態內容。 （next.js）

16. >並發模式：

    提高響應能力並優雅地處理中斷。

<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. REACT查詢：簡化數據獲取，緩存和同步。

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

>

> React服務器組件：
20. 結合客戶端交互與服務器端渲染好處。 （需要一個支持RSC的框架，例如Next.js 13。 >
結論：

掌握這些高級技術，使高級React開發人員能夠創建高性能，可維護和健壯的應用程序。 通過將這些策略集成到您的工作流程中，您將有能力處理複雜的項目並提供出色的用戶體驗。

以上是高級反應技術每個高級開發人員都應掌握的詳細內容。更多資訊請關注PHP中文網其他相關文章！