React は、ユーザー インターフェイスを簡単に構築する方法を提供する強力な JavaScript ライブラリです。ただし、アプリケーションのサイズが大きくなるにつれて、状態管理は複雑な問題になります。この記事では、React コンポーネント間で状態を共有する方法について詳しく説明します。
ステータス向上
まずは「ステータス向上」についてです。これは、React で状態を共有する最も一般的な方法です。 2 つ以上のコンポーネントが同じデータにアクセスする必要がある場合、新しいコンポーネントを作成し、状態に関係するすべてのコンポーネントをその子として作成できます。次に、状態をこの新しいコンポーネントに移動し、最後に props を介してデータを渡します。
class ParentComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
sharedData: 'Hello World' };
}
render() {
return (
<div>
{
/* Child component A */}
<ChildA data={
this.state.sharedData} />
{
/* Child component B */}
<ChildB data={
this.state.sharedData} />
</div>
);
}
}
class ChildA extends React.Component {
render() {
return <p>Child Component A: {
this.props.data}</p>;
}
}
class ChildB extends React.Component {
render() {
return <p>Child Component B: {
this.props.data}</p>;
}
}
useContextフック
状態を共有するもう 1 つの方法は、useContext フックを使用することです。 useContext は React コンポーネント ツリーのコンテキストでデータを渡すことができるメソッドで、props なしで特定の値にアクセスできるようになります。
まず、コンテキスト オブジェクトを作成する必要があります。
const MyContext = React.createContext();
次に、状態を共有する必要があるコンポーネントのトップレベルでMyContext.Providerを使用して、このコンテキスト オブジェクトを提供します。
<MyContext.Provider value={
{
sharedData }}>
{
/* 子组件 */}
</MyContext.Provider>
最後に、この状態にアクセスする必要があるコンポーネントでは、useContext(MyContext): を通じてコンテキスト内のデータを取得できます。
function SomeComponent() {
const context = useContext(MyContext);
console.log(context.sharedData); // 输出 'Hello World'
}
MobX または Redux
大規模なプロジェクトの場合は、MobX や Redux などの特殊な状態管理ライブラリを使用することをお勧めします。これらのライブラリは、タイムトラベル、予測可能性などのより高度な機能を提供します。
MobX を使用した簡単な例を次に示します。
import {
observable } from "mobx";
class Store {
@observable sharedData = "Hello World";
}
const store = new Store();
// 使用store中的sharedData
const App = observer(() => (
<div>
<p>{
store.sharedData}</p>
</div>
));
上記はほんの一部の基本的な例であることに注意してください。実際の開発プロセスでは、特定の状況に基づいて適切な調整を行う必要がある場合があります。
要約すると、React は、状態のプロモーション、useContext フック、状態管理ライブラリの使用など、状態を共有するさまざまな方法を提供します。どの方法を選択するかは、プロジェクトの規模と複雑さによって異なります。この記事が React の共有状態の概念を理解し、適切なアプローチを選択するためのガイダンスになれば幸いです。