ヒント＆トリックは、より良い反応開発者になる

コーディングは、職業として、一定の継続的な学習、問題解決、および最新の滞在を利用可能な様々な便利なツールに滞在する必要があります.開発者は常に簡単に勝つために見張りにする必要があります.私は、彼らの知識を共有する開発者に感謝します.
反応は、アプリケーションのビュー層の面倒を見るだけで、特定のアーキテクチャ(MVCやMVVMなど)を強制しません.これは、あなたの反応プロジェクトの成長としてあなたのコードベースを整理するのは難しいことができます.そこで、開発中に便利で時間節約のトリックがここにあります.

Good architecture makes the system easy to understand, easy to develop, easy to maintain, and easy to deploy. The ultimate goal is to minimize the lifetime cost of the system and to maximize programmer productivity. - Robert C. Martin

コンポーネントインポート
絶対インポートを使用すると、次のようなフォルダをエイリアスできます.

import { MyComponent } from 'components/MyComponent';
import useFetchData from 'hooks/useFetchData';

アプリケーションの絶対インポートを設定するにはtsconfig.json ファイルを使用する場合はjsconfig.json JavaScriptを使用する場合は、プロジェクトのルートディレクトリにあります.コンパイラオプションを更新する必要がありますbaseUrl を返します.

{
  "compilerOptions": {
    "baseUrl": "./src"
  },
  "include": ["src"]
}

カスタムフック
あなたがより良い反応プログラマになりたいならば、あなたがすることができる最高のことは完全にフックを理解するために時間がかかることです.
副作用を実行する必要がありますか?useEffect あなたの友人のためです.副作用の例は、データ取り込み、購読を設定し、手動でDOM反応コンポーネントを変更することです.
貸し手の間の状態を追跡する必要がありますし、その状態が変更されたらrerender?useState 背中があります.を格納し、レンダリングせずにレンダリングの間の値を更新する必要がありますか?またはDOM要素の高さまたは幅を調べる必要がありますか?useRef あなたの友達ですか?
ステートビジネスロジックをUIから分離するコンポーネントの内部の状態の配置のためのロジックを記述するのではなく、自分自身(ドライ)の原則を繰り返すことはありません.
APIコール用のカスタムUsefetchフックを作成しましょう.

import { useEffect, useState } from "react";

const useFetch = (url, method='GET', body={}) => {
  const [isLoading, setIsLoading] = useState(false);
  const [data, setData] = useState([]);
  const [isError, setIsError] = useState(false);

  useEffect(() => {
    if (!url) {
      return;
    }

    let isMounted = true;
    setIsLoading(true);

    const fetchData = async () => {
      try {
        const response = await fetch(url, {
          headers: { 'Content-Type': 'application/json' }, 
          method,
          body: JSON.stringify(body), 
        });

        const data = await response.json();
        setData(data);
      } catch (error) {
        setIsError(error);
      } finally {
        setIsLoading(false);
      }
    };

   if(isMounted ){
    fetchData();
   };

// cleanup function
   return () => {
    isMounted = false;
   };

  }, [url, method, body]);

  return { isLoading, data, isError };
};

export default useFetch;

ところで、useEffect クリーンアップ機能は、初期のリターンをトリガまたは状態の更新を短絡し、反応メモリリークの警告を修正するのに役立ちます.約束はキャンセルできないので、解決策はfetchData 関数呼び出しがunmounted と使用lexical scoping , 我々は共有することができますisMounted コールバック関数とクリーンアップ関数の間で可変です.
USEFETCHカスタムフックを使用してデータをコンポーネントに取り込む

const { isLoading, data, isError } = useFetch(
    "GET",
    "https://jsonplaceholder.typicode.com/posts"
  );

反応成分の単一責任
コードをできるだけ再利用できるようにするには、コンポーネントをできるだけ再利用できるようにすることが重要です.モットーは、コンポーネントの複雑さの削減です.
コンポーネントの反応stateful or stateless . この場合、最善の動きは、データをロードするのに役立つデータと別のステートレスコンポーネントを読み込むために1つのステートフルコンポーネントを持つことができます.ステートレスコンポーネントの一般ルールは、親コンポーネントからの小道具(入力)を受け取ることができ、JSX elements . そのようなコンポーネントはスケーラブルで再利用可能になり、そしてpure function JavaScriptで.
抽象的に離れて純粋な表現の部分.我々は、2つのコンポーネント、リストコンポーネント、および項目のコンポーネントを終了します.

import useFetch from 'hooks/useFetch';

const List = () => {
 const { isLoading, data, isError } =
useFetch("https://jsonplaceholder.typicode.com/posts");

return (
    <>
      {isLoading && <p>Loading...</p>}
       <ul>
        {data.length > 0 && data?.map((info) => (
          <Post key={info.id} {...{info}} />
        ))}
      </ul>
    </>
  );
};

const Post = ({ img, name, author }) => {
  return (
    <li>
      <img src={img} alt={name}/>
      <div className="name">{name}</div>
      <div className="author">{author}</div>
    </li>
  );
};

グローバルvsローカル使用時
反応状態管理のために、あなたはRedux、Mobx、Recol、Context APIなどのような多くの異なる解決を選ぶことができます.
グローバル状態を使用する際の規則

アプリケーションの他の関連しないコンポーネントは、このデータへのアクセスを必要としますか?(例:ユーザ名、Navbarに表示し、歓迎画面に表示します).

あなたがページの間で動くように、データは持続されなければなりませんか?

同じデータが複数のコンポーネントで使用されますか?

答えがyesのいずれかのこれらの質問には、グローバルな状態を使用することがあります.しかし、置かないでくださいopen グローバル状態のメニューの状態.アプリケーション間で共有する必要がある理由、およびローカルコンポーネント内で何ができるかを説明してください.

CMSを使用すると、数分であなたの反応コンポーネントに動的コンテンツを追加することができます
近代的なコンテンツ管理システム(CMS)は、コンテンツ制作者は、任意のウェブサイトやアプリケーションにコンテンツを配信するための開発ツールを提供しながらフレンドリーなダッシュボードを使用してコンテンツを管理することができます.一般的に使用される用語は、ヘッドレスCMSは、開発者がウェブサイト、AndroidやIOSのアプリなどのような様々なチャネルを介してコンテンツを配信できるようにAPI(いずれかのRESTfulまたはGraphSQL)を使用しています.このように、ヘッドレスのCMSは、コンテンツのクリエイターや開発者のチームをそれぞれのツールは、非常に協調的な方法で迅速に創造性を活用する必要があります.このAPIの最初の方法では、ヘッドレスCMSは完全にあなたの反応アプリケーション開発のワークフローに動的なコンテンツを追加するために適しています.
試してみてくださいCosmic それは簡単かつ迅速です.

これを以前の例と統合しましょうCosmic CMS and SWR データフェッチのためにフックを反応させます.端末で以下のコマンドを実行するnpm i cosmicjs swr . では、インデックスというファイルを作成します.以下のコードを使用します

import React from 'react';
import useSWR from 'swr';
import Cosmic from 'cosmicjs';
import Post from 'components/Post';

const api = Cosmic();

// Set these values, found in Bucket > Settings after logging in at https://app.cosmicjs.com/login
const bucket = api.bucket({
  slug: 'YOUR_BUCKET_SLUG',
  read_key: 'YOUR_BUCKET_READ_KEY'
});

const fetchPosts = async () => {
  const data = await bucket.getObjects({
    query: {
      type: 'posts'
    },
    props: 'slug,title,metadata' 
  })
  return data
};

const List = () => {
 //For data fetching use SWR hook
  const { data, error } = useSWR('fetch-posts', fetchPosts);

  if (error) return <p>Failed to load</p>
  if (!data) return <p>Loading...</p>

  const posts = data.objects;

  return (
    <ul>
      {posts?.map(post => (
         <Post key={post.slug} {...{post}} />
      ))}
    </ul>
  )
};

この記事では、我々はより良い反応開発者に役立つヒントを超えて:コンポーネントのインポート、カスタムフック、コンポーネントの再利用性、状態管理、ヘッドレスのCMSを使用して、宇宙のように、あなたのコンテンツチームのメンバーに手をオフに簡単になります.役に立つリンクを追加します.

あなたの反応アプリで宇宙を使用する方法の詳細についてはSign up for Cosmic ,

反応の詳細については:Using Hooks ,
, Sharing State Between Components

読んでいただきありがとうございます、あなたは私に手を差し伸べるし、私を見つけることができます.私はどのように反応開発者として改善するためにあなたの考えを聞いてみたい!