Reactの状態切り替え方法

React コンポーネントのブール状態を切り替える方法（日本語）

Reactコンポーネントのブール状態をトグル（切り替え）するには、通常、その状態を管理するコンポーネント内で状態フック（useState）を使用します。

基本的な手順：

1. 状態フックの定義
   

   import React, { useState } from 'react';
   
   function MyComponent() {
     const [isToggled, setIsToggled] = useState(false);
   }
   

   • isToggledはブール値の状態を保持する変数です。
   • setIsToggledは状態を更新するための関数です。

2. 状態の切り替え
   

   function MyComponent() {
     // ...
   
     const handleToggle = () => {
       setIsToggled(!isToggled);
     };
   }
   

   • handleToggle関数を使用して、isToggledの状態を逆転させます。

3. 状態のレンダリング
   

   function MyComponent() {
     // ...
   
     return (
       <div>
         <button onClick={handleToggle}>Toggle</button>
         {isToggled ? <p>Toggled</p> : <p>Not toggled</p>}
       </div>
     );
   }
   

   • isToggledの状態に基づいて、異なるコンポーネントまたは要素をレンダリングします。

例：

import React, { useState } from 'react';

function MyComponent() {
  const [isShown, setIsShown] = useState(false);

  const handleClick = () => {
    setIsShown(!isShown);
  };

  return (
    <div>
      <button onClick={handleClick}>Show/Hide</button>
      {isShown && <p>This content is shown when isShown is true.</p>}
    </div>
  );
}

この例では、ボタンをクリックすると、isShownの状態が切り替わり、それに応じてコンテンツが表示または非表示になります。

注意

• useStateフックは、コンポーネント内のローカル状態を管理するためのシンプルな方法です。
• より複雑なロジックや状態管理が必要な場合は、ReduxやContext APIなどの他の状態管理手法を検討してください。

import React, { useState } from 'react';

function MyComponent() {
  const [isShown, setIsShown] = useState(false);

  const handleClick = () => {
    setIsShown(!isShown);
  };

  return (
    <div>
      <button onClick={handleClick}>Show/Hide</button>
      {isShown && <p>This content is shown when isShown is true.</p>}
    </div>
  );
}

Context API:

• 例
  

  import React, { createContext, useContext, useState } from 'react';
  
  const ToggleContext = createContext();
  
  function ToggleProvider({ children }) {
    co   nst [isToggled, setIsToggled] = useState(false);
  
    return (
      <ToggleContext.Provider value={{ isToggled, setIsToggled }}>
        {children}
      </ToggleContext.Provider>
    );
  }
  
  function MyComponent() {
    const { isToggled, setIsToggled } = useContext(ToggleContext);
  
    // ...
  }
  

• グローバルな状態管理
  コンポーネントツリー全体で状態を共有する必要がある場合に便利です。

Redux:

• 例
  

  import React from 'react';
  import { useSelector, useDispatch } from 'react-redux';
  import { toggleState } from './actions';
  
  function MyComponent() {
    const isToggled = useSelector(state => state.toggleState);
    const dispatch = useDispatch();
  
    const handleToggle = () => {
      dispatch(toggleState());
    };
  
    // ...
  }
  

• 大規模なアプリケーションでの状態管理
  複雑な状態管理や複数のコンポーネント間での状態共有が必要な場合に適しています。

MobX:

• 例
  

  import React, { observer } from 'mobx-react';
  import { observable, action } from 'mobx';
  
  class MyStore {
    @observable isToggled = false;
  
    @action toggleState() {
      this.isToggled = !this.isToggled;
    }
  }
  
  const myStore = new MyStore();
  
  @observer
  function MyComponent() {
    const { isToggled, toggleState } = myStore;
  
    // ...
  }
  

• シンプルな状態管理
  useStateフックよりも簡潔な構文で状態を管理できます。