close

React フックとコンテキストを使用してコードを整理する

大規模な React プロジェクトに取り組む場合、保守性とスケーラビリティを向上させるために、コードベースをよく整理することが重要です。

この記事では、React のフックとコンテキストの利用に焦点を当てて、React でソース コードを整理するためのベスト プラクティスについて詳しく説明します。

 

状態管理のための React フックの使用

React Hooks は、クラスを使用せずに状態やその他の React 機能を使用できるようにする関数のコレクションです。 これは、より簡潔で読みやすいコードを作成するのに役立ちます。 たとえば、useState フックを使用してコンポーネントの状態を管理できます。

以下に例を示します。 

import React, { useState } from 'react';  
  
function Counter() {  
  const [count, setCount] = useState(0);  
  
  const increment =() => {  
    setCount(count + 1);  
  };  
  
  return( 
    <div>  
      <p>Count: {count}</p>  
      <button onClick={increment}>Increment</button>  
    </div>  
 );  
}  
  
export default Counter;

 

成分の組み合わせ

React の利点の 1 つは、コンポーネントを再利用できることです。 組織を強化するには、より小さなコンポーネントを使用してより大きなコンポーネントを構築します。

これにより、作業が細分化され、コードの保守が容易になります。 たとえば、 <Button> アプリケーション内の複数の場所で使用するコンポーネントを作成できます。 

import React from 'react';  
  
function Button({ onClick, children }) {  
  return <button onClick={onClick}>{children}</button>;  
}  
  
export default Button;

 

コンテキストを使用してグローバル状態を管理する

コンテキストは、親コンポーネントを経由せずに子コンポーネント間でデータを共有できるようにする React のメカニズムです。 これにより、複数のコンポーネント レベル間でデータ属性を渡すことが回避され、コードの複雑さが軽減されます。

以下は、Context を使用してアプリケーション内で現在の言語を共有する例です。 

import React, { createContext, useContext, useState } from 'react';  
  
const LanguageContext = createContext();  
  
function App() {  
  const [language, setLanguage] = useState('en');  
  
  const changeLanguage =(newLanguage) => {  
    setLanguage(newLanguage);  
  };  
  
  return( 
    <LanguageContext.Provider value={{ language, changeLanguage }}>  
      <div>  
        <Navbar />  
        <Content />  
      </div>  
    </LanguageContext.Provider>  
 );  
}  
  
function Navbar() {  
  const { language, changeLanguage } = useContext(LanguageContext);  
  
  return( 
    <div>  
      <button onClick={() => changeLanguage('en')}>English</button>  
      <button onClick={() => changeLanguage('fr')}>French</button>  
      <button onClick={() => changeLanguage('es')}>Spanish</button>  
      <p>Current language: {language}</p>  
    </div>  
 );  
}  
  
function Content() {  
  const { language } = useContext(LanguageContext);  
  
  return <p>This is the content in {language}.</p>;  
}  
  
export default App;

 

上記は、React フックとコンテキストを使用して React ソース コードを整理するためのいくつかのベスト プラクティスです。