Reactの7つのヒントとコツ

TypeScriptを使用

リアクトの話であろうと、他のライブラリの話であろうと、Typescriptを使うことは、あなたの コード 以下、比較してみよう。 ジャバスクリプト vs プロップ型を扱うタイプスクリプト。

import PropTypes from 'prop-types'

function UserCard({ user }) { を返します。
return

{user.firstname}, {user.lastname} を返します。

}

UserCard.propTypes = { user: user.propTypes
ユーザPropTypes.shape({
firstname: PropTypes.string.isRequired、
lastname: PropTypes.string.isRequired
...
})
}

function UserList({ users }) { { userList({ users })
戻り値

{users.map((user) => )}を返します。

}

UserList.propTypes = { ユーザ: propTypes
users：PropTypes.arrayOf(PropTypes.shape({
firstname: PropTypes.string.isRequired、
lastname: PropTypes.string.isRequired
...
}))
}

インターフェース User {
firstname: String！
lastname: 文字列！
...
}

関数 UserCard({ user }: { user: User }) { { userCard({ user }: { user: User })
return

{user.firstname}, {user.lastname} を返します。

}

function UserList({ users }: { users: User[] }) { }.
戻り値

{users.map((user) => )}を返します。

すべてのデータスキーマをひとつの場所にインターフェイスとして置き、残りのすべてのコードでそれを再利用することを想像してみてほしい。こうすることで、タイプミスを防げるだけでなく、スキーマを変更したい場合にも、一カ所で変更すれば済むようになる。

それに加えて、多くの有名なjavascriptライブラリがTypescriptに移行している： アドニスJS

プレゼンテーション・コンポーネントとコンテナ・コンポーネントの分離

プレゼンテーショナル・コンポーネントとコンテナ・コンポーネントを分離することで、コードのテストや推論が容易になる。

プレゼンテーションの構成要素 には関心がある。 どう見えるか それは、その "ヴェニュー "を受け取ることだ。 データと行動 親コンポーネントから。

コンテナ・コンポーネント には関心がある。 物事の仕組み を提供する。 データと行動 をプレゼンテーショナル・コンポーネントやその他のコンテナ・コンポーネントに追加する。

このアプローチを使うことで、同じプレゼンテーション・コンポーネントを異なるデータや動作で再利用することができる。それに加えて、コードがすっきりし、テストが非常に簡単になる。

異なるデータと動作を提供する異なるコンテナで使用されるユーザーコンポーネントの例を以下に示します。

関数BuyerContainer() {。
return
}

関数 SellerContainer() {
return
}

関数 UserComponent({ name, onClick }) {
return

}

Reactフックと機能コンポーネントを使用する 機能コンポーネント「以前はステートレスコンポーネントと呼ばれていました」は、もうステートレスではありません。Reactフックのおかげで、useStateフックを使用して、機能コンポーネントに状態を保存できるようになりました。機能コンポーネントは読みやすく、テストしやすい。React Coreには他にも便利なフックがいくつかあり、フックリファレンスで調べることができます。すごいのは、カスタム・フックを定義できることだ。以下の例では、useDebounceというカスタムreactフックを作成しました。これは、入力テキストが変更されたときにオートコンプリートのAPIコールを制限するために使用されます。

import { useEffect } from 'react'；
import { debounce } from 'lodash'；
エクスポートデフォルト function useDebounce( fn, delay = 500 ) { }.
const debounced = useMemoOne( () => debounce( fn, delay ), [ )
fn、
delay、
]);
useEffect( () => () => debounced.cancel(), [ debounced ] )；
return debounced；
}
export default function SearchComponent()
const fetchAutoComplete = useDebounce((e) => { )
      // Fetch API (オプション)
}, 1000) // 1秒

return (

{...}
)
}

それに加えて、ReactフックはHigher-Order Components (HoC)の素晴らしい代替品です。Styled Component Styled Componentは、ESの利点を生かしながら、コンポーネントレベルでDynamic CSSの導入を可能にするライブラリです。コンポーネントをより予測しやすく、再利用しやすくします。既存のクラス名の使用を避けながら、要素の適切なクラス名を探すのに多くの時間を費やす必要はありません。Styled Componentsでは、スタイルがコンポーネントにスコープされ、ビルドステップでクラス名が自動生成されます。その上、動的なCSSを作成するのがかつてないほど簡単になりました。あなたのスタイルはコンポーネントに渡されたpropsに従って生成されます。次の例では、divのスタイルはアウトライン化されたpropとグローバルテーマの両方に依存しています。

const Wrapper = styled.div`

  ボーダー${props => props.outlined ?'1px solid' : 'none'}；

    background: ${props => props.theme.light ?'black' : 'white'}; background: ${props => props.theme.light ?

styled-componentsの最後のポイントは、使用していないコンポーネントの不要なスタイルを読み込まないことで、パフォーマンスが向上することです。スロットフィルライブラリ リアクトアプリのレイアウトを定義した後で、特定のページだけサイドバーにウィジェットを追加したいとします。最初からそのようなケースを考慮していなかった場合、レイアウトに大きな変更が必要になる可能性があります。しかし、‣のようなライブラリを使えば、サイドバーにスロットを定義するだけです。そうすれば、サイドバーにアクセスするためにコンポーネントツリーに沿ってフラグを渡す必要がなくなります。これはReact Portalsに似た動作で、モーダルやツールチップのようなケースに最適なソリューションです。

インポート { スロット、フィル、プロバイダ } from 'react-slot-fill'；
コンストサイドバー = (props) =>
 
export default ツールバー；
サイドバー.アイテム = (props) =>

{ props.label }.
コンスト・ウィジェット = () =>
[

];
const Page = ({children}) => [ ]; }.

{children}

const ホームページ = () =>

ウィジェットなしのページ
const DashboardPage = () => Widjetなしのページ。

Widjetを使用したページ

高次コンポーネント ReactフックがほとんどのケースでHOCを置き換えるとしても、HoCはページコンポーネントへの複数のpropの提供や条件付きレンダリング(プライベートルートやロードステータス...)のようなコンポーネントからの複雑さを隠すための素晴らしい選択です。HoCは、ページコンポーネントへの複数のpropsの提供や条件付きレンダリング(プライベートルート、ロードステータス...)のようなコンポーネントからの複雑さを隠すことに関しては、まだ素晴らしい選択肢です。次の例は、プライベートルートとページ共通のpropsの両方の複雑さを、すべてのアプリケーションページに適用される再利用可能なHoCにカプセル化する方法を示しています。ほとんどのHoCはReact Hooksで置き換えることができます。そのため、HoCはページコンポーネントをすっきりさせるために必要な場合のみ使用してください。そうでない場合はReact Hooksを使用してください。

関数 withPrivateRoute(Component) { ...
...
return function PrivateRoute(props) { ...
if (!userConnected) return ；
を返します；
};
}
function withPageProps(Component) { ...
...
return function privateRoute(props) { ...
を返します；
};
}
関数 ProfilePage({ navigation, currentPath, currentUser}) { ...
return
プロフィールページ
}
エクスポートデフォルト withPrivateRoute(withPageProps(ProfilePage))

エラーバウンダリ エラーバウンダリとはクラスコンポーネントのことで、子クラスで発生したエラーや例外をすべて捕捉します。トップレベルで宣言すると、エラーメッセージを表示したり、Sentryのようなプラットフォーム監視ツールでエラーをログに記録したりすることで、適切なエラー処理を行うことができます。こうすることで、いち早くエラーをキャッチし、ユーザーエクスペリエンスに影響を与える前に修正を試みることができます。注意：ErrorBoundariesは、機能コンポーネントをサポートしないクラスで宣言する必要があります。

class ErrorBoundary extends React.Component { {エラーバウンダリ
コンストラクタ(props) {
super(props)；
this.state = { hasError: false }；
}
静的getDerivedStateFromError(error) { 次のようになります。
return { hasError: true }；
}
コンポーネントDidCatch(error, errorInfo) { { }.
logErrorToMySentry(error, errorInfo)；
}
render() {
if (this.state.hasError) { { エラーを返します。
return
何か問題が発生しました！管理者に連絡
;
}
return this.props.children；

}
}