より多くのスーパーパワーにあなたの反応コードを簡素化-あなたのアプリケーション-パート1

それが来るときReact 開発は、我々はしばしば忘れてはならない開発者として、これまで忘れてはならない1つのマントラがあります:“以下はもっと”です.それは表現よりもはるかに、それは思考の方法、問題解決の方法であり、それはあなたのデザインに影響を与える必要があります.KISS 60年以上の間、そして、それが半世紀前にあったので、今日、それはまだprecientとしてあります.
開発者として、私たちは、エンジニアリングと開発の上で避けなければなりません.これは、小さなコンポーネントにコンポーネントをリファクタリングの組み合わせ、コンポーネントの入出力の複雑さを減らす、あまりにも多くの処理と複雑なアルゴリズムを回避することができます.
我々はすべてを簡単にすることなく、できるだけ簡単にするように目指してください.それは私たちにとって、できるだけ効率的に認知オーバーロードなしで作業することです.これは、新しいプログラマだけに孤立した問題ではない.我々はすべての目的や目標を達成するために短いルートを取った.時には我々は選択していない、時々我々はより良い方法を知っていない可能性がありますので、我々はちょうどそれを適切に行うために時間を投資したくないので、他の回.
より少ないのは、あらゆる種類の開発者が従事することができる何かである.それは必然的にあなたのアプリケーション開発を改善し、あなたが働くアプリケーションを改善し、より効果的に働くのを助けるでしょう.開発者の測定の究極の目標は、コードの行ではありませんこれは、コードの品質で生成する必要がありますエラーレートと再加工が必要です.

反応成分の簡素化

我々は既存のコンポーネントの劇的なオーバーホールなしで我々のコンポーネントを簡素化するために取ることができる戦略の数があります.それぞれの戦略は別のブログでカバーされます.

表示から分離した状態、これはよく確立されたMVC規則と一致するあなたのアプリケーションを助ける

サービスとカスタムフックへの処理を延期する

オーバーロードを避けるuseEffect and useState

ifをredux & redux-saga 本当に必要

コンポーネント間の機能を結合するための高次コンポーネントを作成する

コンポーネントのうち、コンポーネントのうち、ヘルパー関数にシフトする

使用可能な怠惰な読み込みと怠惰な振る舞いを使用する

1 .ディスプレイからの分離状態、これはあなたのアプリケーションがよく確立されたMVC規則と一致するのを助けるでしょう

MVCの原則に続く伝統的なアプリケーションのデザインは、3つの異なるコンポーネントにアプリケーションロジックを分割することですモデル、ビュー、コントローラ.コントローラはユーザの入力と終了とユーザイベントの取り扱いに責任があります.モデルはユーザデータの突然変異に応答して責任があり、ビューは常にモデルを反映する必要があります.

一般的な反応コンポーネント構造を単純化する例を見てみましょう.

const globalState = someStateTool();
const myComponent: React.FC<> = () => {
  const [ myState, setMyState ] = useState<any>({});
  const [ loaded, setLoaded ] = useState<boolean>(false);

  useEffect(() => {
    setTimeout(() => { setLoaded(true); }, 2500);
    setTimeout(() => { globalState.set("foo", "bar")}, 5000);
  }, [])

  return loaded ? (<MySubComponent/>) : (<SpinnerComponent/>);
}

const mySubComponent: React.FC = () => {
  const [ someState, setSomeState ] = useState<any>(null);
  globalState.subscribeTo("someEvent", ev => setSomeState(ev.data));
  const handleClick = () => globalState.set("foo", "bar");

  return (
    <div>
      <button onClick={handleClick}>Some title</button>
    </div>
    <div>{someState.foo}</div>
  )
}

各コンポーネントには、そのコンポーネントに固有の分離機能が含まれます.したがって、彼らは純粋ではないが、彼らは独立して交換可能です.これらのタイプのコンポーネントは、さまざまなユーザー入力の振る舞いおよびデータ駆動イベントに本質的に応答する.それはしばしば増加した複雑さで手に入ります、そして、親コンポーネントに直接でないならば、結合を増やしました、しかし、流れ、イベント購読とデータとイベントの他の源に関して.
両方とも様々なサービスとプロバイダーを模擬して、ふるまいとインタラクションを取り扱う必要があるので、各々の構成要素にかかわる重要なテスト努力もあります.

// Create a contract for the sub component
type SubComponentType = { foo: string, handleClick: () => void };

const globalState = someStateTool();
const myComponent: React.FC<> = () => {
  const [ myState, setMyState ] = useState<any>({});
  const [ loaded, setLoaded ] = useState<boolean>(false);
  globalState.subscribeTo("someEvent", ev => setMyState(ev.data));
  const handleClick = () => globalState.set("foo", "bar");

  useEffect(() => {
    setTimeout(() => { setLoaded(true); }, 2500);
    setTimeout(() => { globalState.set("foo", "bar")}, 5000);
  }, [])

  return loaded ? (<MySubComponent foo={myState.foo} handleClick={handleClick}/>) : (<SpinnerComponent/>);
}

// Make sure our component adheres to the type contract
const mySubComponent: React.FC<SubComponentType> = ({ foo, handleClick }) => {
  return (
    <div>
      <button onClick={handleClick}>Some title</button>
    </div>
    <div>{foo}</div>
  )
};

この段階でさらに移行し、遷移コンポーネントを高次のコンポーネント、または別のコンポーネントを状態に基づいてレンダリングするラップコンポーネントに分離することもできます.

type SubComponentType = { foo: string, handleClick: () => void };

const globalState = someStateTool();

const myComponentLoader: React.FC = () => {
  const [ loaded, setLoaded ] = useState<boolean>(false);

  useEffect(() => {
    setTimeout(() => { setLoaded(true); }, 2500);
  }, [])

  return loaded ? (<MyComponent/>) : (<SpinnerComponent/>);
}

const myComponent: React.FC<> = () => {
  const [ myState, setMyState ] = useState<any>({foo: globalState.get("foo")});
  globalState.subscribeTo("someEvent", ev => setMyState(ev.data));
  const handleClick = () => globalState.set("foo", "bar");

  return <MySubComponent foo={myState.foo} handleClick={handleClick}/>;
}

const mySubComponent: React.FC<SubComponentType> = ({ foo, handleClick }) => {
  return (
    <div>
      <button onClick={handleClick}>Some title</button>
    </div>
    <div>{foo}</div>
  )
};

同じコンポーネント構造を表すために、より多くの行のコードを作成しました.

ビューロジックからモデルロジックを分離しました

MySubComponent 純粋なコンポーネントです同じ入力を与えられて、それは常に同じ出力を生産しなければなりません

MyComponent 酵素のようなツールで簡単にテスト可能です-ちょうどサブコンポーネントを確認する必要がロードされます

すべてのロードロジックはトップレベルのコンポーネントで処理されます.ロードすることができるコンポーネントは、必要に応じて交換することができます.

私はサービスやサービスへの遅延処理をカバーしますcustom hooks .