React コンポーネント間通信：Redux と MobX で大規模アプリケーションを制覇
2024-04-02
React コンポーネント間の通信方法
props
概要
親コンポーネントから子コンポーネントへデータを渡す最も基本的な方法です。props は、子コンポーネントに渡されるオブジェクトで、コンポーネントの属性として指定されます。
メリット
- シンプルで分かりやすい
- 軽量で効率的
- 一方向にしかデータを渡せない
- 親子関係にしか適用できない
例
// 親コンポーネント
const Parent = () => {
const data = "Hello, world!";
return (
<Child data={data} />
);
};
// 子コンポーネント
const Child = ({ data }) => {
return (
<div>{data}</div>
);
};
state
コンポーネント内部でデータを保持し、更新することができます。state は、コンポーネントの内部状態を表すオブジェクトで、useState フックを使用して初期化されます。
- コンポーネント内部でデータを管理できる
- 複雑なデータ構造には不向き
- 大規模なアプリケーションでは管理が難しくなる
const App = () => {
const [count, setCount] = useState(0);
const handleClick = () => {
setCount(count + 1);
};
return (
<div>
<h1>カウント: {count}</h1>
<button onClick={handleClick}>+</button>
</div>
);
};
context
複数のコンポーネント間でデータを共有するための仕組みです。context は、コンポーネントツリー全体で共有できる値を提供します。
- 親子関係に縛られない
- 複雑になりやすい
- 不要なコンポーネントも再レンダリングされる
// context を作成
const ThemeContext = createContext();
// context を提供するコンポーネント
const ThemeProvider = ({ children }) => {
const [theme, setTheme] = useState("light");
return (
<ThemeContext.Provider value={{ theme, setTheme }}>
{children}
</ThemeContext.Provider>
);
};
// context を使用するコンポーネント
const MyComponent = () => {
const { theme } = useContext(ThemeContext);
return (
<div style={{ color: theme }}>
<h1>テーマ: {theme}</h1>
</div>
);
};
イベント
コンポーネント間でイベントを発生させ、それを受け取ることで通信することができます。イベントは、コンポーネント間の双方向通信を実現する手段です。
- 柔軟性が高い
- ユーザー操作に合わせた通信が可能
- コード量が増える
- イベントの種類が増えると管理が難しくなる
// 親コンポーネント
const Parent = () => {
const handleClick = () => {
console.log("親コンポーネントでクリックされました");
};
return (
<div>
<button onClick={handleClick}>ボタン</button>
<Child onClick={handleClick} />
</div>
);
};
// 子コンポーネント
const Child = ({ onClick }) => {
return (
<div>
<button onClick={onClick}>子コンポーネントでクリックされました</button>
</div>
);
};
その他のライブラリ
Redux や MobX などのライブラリを使用することで、より複雑なデータ管理やコンポーネント間の通信を実現することができます。
- 複雑なコンポーネント間の通信を簡略化できる
- 学習コストが高い
- アプリケーションによっては不要な場合がある
// Redux を使用した例
const store = createStore(reducer);
const App = () => {
const count = useSelector((state) => state.count);
const dispatch = useDispatch();
const handleClick =
props
// 親コンポーネント
const Parent = () => {
const data = "Hello, world!";
return (
<Child data={data} />
);
};
// 子コンポーネント
const Child = ({ data }) => {
return (
<div>{data}</div>
);
};
state
const App = () => {
const [count, setCount] = useState(0);
const handleClick = () => {
setCount(count + 1);
};
return (
<div>
<h1>カウント: {count}</h1>
<button onClick={handleClick}>+</button>
</div>
);
};
context
// context を作成
const ThemeContext = createContext();
// context を提供するコンポーネント
const ThemeProvider = ({ children }) => {
const [theme, setTheme] = useState("light");
return (
<ThemeContext.Provider value={{ theme, setTheme }}>
{children}
</ThemeContext.Provider>
);
};
// context を使用するコンポーネント
const MyComponent = () => {
const { theme } = useContext(ThemeContext);
return (
<div style={{ color: theme }}>
<h1>テーマ: {theme}</h1>
</div>
);
};
イベント
// 親コンポーネント
const Parent = () => {
const handleClick = () => {
console.log("親コンポーネントでクリックされました");
};
return (
<div>
<button onClick={handleClick}>ボタン</button>
<Child onClick={handleClick} />
</div>
);
};
// 子コンポーネント
const Child = ({ onClick }) => {
return (
<div>
<button onClick={onClick}>子コンポーネントでクリックされました</button>
</div>
);
};
その他のライブラリ
// store を作成
const store = createStore(reducer);
const App = () => {
const count = useSelector((state) => state.count);
const dispatch = useDispatch();
const handleClick = () => {
dispatch({ type: "INCREMENT" });
};
return (
<div>
<h1>カウント: {count}</h1>
<button onClick={handleClick}>+</button>
</div>
);
};
React コンポーネント間の通信には、props、state、context、イベント、その他のライブラリなど、さまざまな方法があります。それぞれの方法にはメリットとデメリットがあり、状況によって使い分けることが重要です。
上記サンプルコードを参考に、それぞれの方法を理解し、適切な方法でコンポーネント間の通信を実装してください。
その他のコンポーネント間通信方法
refs を使用して、コンポーネント間の直接的な参照を作成することができます。これは、親コンポーネントが子コンポーネントのメソッドやプロパティに直接アクセスしたい場合に便利です。
// 親コンポーネント
const Parent = () => {
const childRef = useRef();
const handleClick = () => {
childRef.current.focus();
};
return (
<div>
<button onClick={handleClick}>子コンポーネントにフォーカス</button>
<Child ref={childRef} />
</div>
);
};
// 子コンポーネント
const Child = ({ ref }) => {
return (
<input ref={ref} />
);
};
高階コンポーネント (HOC)
HOC を使用して、コンポーネントに共通の機能を追加することができます。これは、複数のコンポーネントで同じような処理を行う必要がある場合に便利です。
const withAuth = (Component) => {
return (props) => {
const { isLoggedIn } = useContext(AuthContext);
if (!isLoggedIn) {
return <Redirect to="/login" />;
}
return <Component {...props} />;
};
};
const MyComponent = () => {
return (
<div>
<h1>秘密のページ</h1>
</div>
);
};
const Auth
javascript reactjs
