Reactコンポーネントの作成から学んだ2つのレッスン

これは、Reactコンポーネントを構築しない方法について学んだ教訓をいくつか紹介します。これらは私が過去数か月にわたって出会ったものであり、特に多くのレガシーの技術的決定と多くの技術的負債を備えたデザインシステムに取り組んでいる場合、あなたに興味があるかもしれないと思っていました。

レッスン1：できる限り子供のコンポーネントを避けてください

多くのコンポーネントを備えた大きなデザインシステムで作業することについての1つのことは、最終的に次のパターンが本当に迅速に問題になり始めることです。

 <card>
  <card.header> title </card.header>
  <card.body> <p>これはいくつかのコンテンツです</p> </card.body>
</card>

問題のある部分は、それらの子コンポーネント、card.body、card.headerです。この例は、物事が比較的単純であるため、ひどくはありません。コンポーネントがより複雑になったとき、物事がおかしくなります。たとえば、各子供のコンポーネントには、他の子どもたちと干渉する一連の複雑な小道具を持つことができます。

私の最大の問題の1つは、フォームコンポーネントの場合です。これを取る：

送信 キャンセル

もちろん、私は物事をかなり単純化していますが、エンジニアが2つのボタンを互いに隣に配置したいと思うたびに、ページにフォームがなかったとしても、フォームをインポートします。これは、フォームコンポーネント内のすべてがインポートされることを意味し、それは最終的にパフォーマンスに悪いことです。たまたまシステム設計の実装もそうです。

これにより、コンポーネントを文書化する際には、これらの各子供コンポーネントも文書化されていることを確認する必要があるため、物事はさらに困難になります。

したがって、フォームを作成する代わりに、子コンポーネントにアクセスする代わりに、単純に新しいコンポーネントにする必要があります。そうすれば、常にフォームをインポートする必要はなく、レイアウトベースのコンポーネントを他のコンポーネントとは別に保持できます。

私は自分のレッスンを学びました。これからは、できる限り子どものコンポーネントを完全に避けます。

レッスン2：あなたの小道具が互いに矛盾しないことを確認してください

マンディマイケルは、このタイプスクリプトのように、小道具が互いにぶつかり、あらゆる種類の紛争を引き起こす方法について素晴らしい記事を書きました。

インターフェイスプロップ{
  hidemedia？：ブールアリーン
  MediaisedgetOedge？：boolean
  Mediafullheight？：boolean
  VideoInline？：boolean
}

マンディは書いています：

これらの小道具の目的は、カード内の画像またはビデオのレンダリング方法を変更するか、メディアがまったくレンダリングされているかどうかを変更することです。それらを個別に定義することの問題は、コンポーネント機能を切り替える多くのフラグがあり、その多くが相互に排他的であることです。たとえば、マージンが隠されている場合、マージンを埋める画像を作成することはできません。

これは、チームの設計システムで継承した多くのコンポーネントにとって間違いなく問題でした。ブールの小道具があらゆる種類の奇妙で予期しない方法でコンポーネントを動作させるコンポーネントがたくさんありました。開発中に、開発中にカードコンポーネントにあらゆる種類のバグがポップアップすることもありました。エンジニアは、どのプロップをオンにしてオフにするかを知らないためです。

マンディは次のソリューションを提供します。

タイプmediamode = 'hidden' | 「edgetoedge」| 「Fullheight」

インターフェイスプロップ{
  Mediamode：「Hidden」| 「edgetoedge」| 「Fullheight」
}

要するに、これらの初期オプションをすべて組み合わせると、簡単に拡張可能で、将来混乱を引き起こす可能性が低いよりクリーンなAPIがあります。

それでおしまい！これらの2つのレッスンについて簡単にメモしたかっただけです。これが私の質問です。コンポーネントを作成したり、設計システムで作業したりすることに関して、何を学びましたか？

以上がReactコンポーネントの作成から学んだ2つのレッスンの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。