React Hooks の一般的な使用シナリオ (概要)

関数状態(){
  定数[count, setCount] = useState(0);
  戻る （
      <div>
          <p>クリック回数は {count} 回です</p>
          <ボタンのクリック時={() => setCount(count + 1)}>
              クリックしてください
          </ボタン>
      </div>
  ）
}

// setState(newCount) を直接更新します。

// 機能更新 setState(prevCount => prevCount - 1);

setState(前の状態 => {
  // Object.assignも使用できます
  {...prevState、...updatedValues} を返します。
});

const [状態、setState] = useState(() => {
  定数初期状態 = someExpensiveComputation(props);
  初期状態を返します。
});

関数 Effect(){
  定数[count, setCount] = useState(0);
  使用効果(() => {
    console.log(`${count} 回クリックしました`);
  });

  戻る （
      <div>
          <p>クリック回数は {count} 回です</p>
          <ボタンのクリック時={() => setCount(count + 1)}>
              クリックしてください
          </ボタン>
      </div>
  ）
}

使用効果(() => {
  サブスクリプション = props.source.subscribe();
  戻り値 () => {
    // サブスクリプションをクリアします subscription.unsubscribe();
  };
});

使用効果(() => {
  document.title = `${count} 回クリックしました`;
}, [count]); // countが変更された場合にのみ更新する

使用効果(() => {
  .....
}, []);

// 悪い、推奨されない関数 Example({ someProp }) {
  関数doSomething() {
    コンソールにログ出力します。
  }

  使用効果(() => {
    何かを実行します();
  }, []); // 🔴 これは安全ではありません（`someProp` を使用する `doSomething` を呼び出します）
}

// 良い、推奨される関数 Example({ someProp }) {
  使用効果(() => {
    関数doSomething() {
      コンソールにログ出力します。
    }

    何かを実行します();
  }, [someProp]); // ✅ 安全（このエフェクトでは `someProp` のみを使用します）
}

// 1. プラグインをインストールする npm i eslint-plugin-react-hooks --save-dev

// 2. eslint 設定 {
  「プラグイン」: [
    // ...
    「反応フック」
  ]、
  「ルール」: {
    // ...
    "react-hooks/rules-of-hooks": "エラー",
    "react-hooks/exhaustive-deps": "警告"
  }
}

'react' から React をインポートします。
テーマコンテキストを React.createContext(0);
デフォルトの ThemeContext をエクスポートします。

React をインポートし、{useState} を 'react' から取得します。
'./ThemeContext' から ThemeContext をインポートします。
'./ContextComponent1' から ContextComponent1 をインポートします。

関数ContextPage(){
  定数[count, setCount] = useState(1);
  戻る （
    <div className="アプリ">
      <ThemeContext.Provider 値 = {count}>
        <コンテキストコンポーネント1 />
      </テーマコンテキスト.プロバイダー>
      <ボタンのクリック時={() => setCount(count + 1)}>
              クリックしてください
      </ボタン>
    </div>
  );
}

デフォルトのContextPageをエクスポートします。

// サブコンポーネント、サブコンポーネント内の孫コンポーネントを使用します import React from 'react';
'./ContextComponent2' から ContextComponent2 をインポートします。
関数ContextComponent(){
  戻る （
    <コンテキストコンポーネント2 />
  );
}
デフォルトのContextComponentをエクスポートします。


// 孫コンポーネント。孫コンポーネントで Context オブジェクトの値を使用します。import React, { useContext } from 'react';
'./ThemeContext' から ThemeContext をインポートします。
関数ContextComponent(){
  定数値 = useContext(ThemeContext);
  戻る （
    <div>useContext:{値}</div>
  );
}
デフォルトのContextComponentをエクスポートします。

React をインポートし、 'react' から { useReducer } を追加します。
インターフェース状態タイプ{
  カウント: 数
}
インターフェースアクションタイプ{
  タイプ: 文字列
}
定数初期状態 = { カウント: 0 };
const リデューサー = (状態:状態タイプ、アクション:アクションタイプ) => {
  スイッチ（アクションタイプ）{
    ケース '増分':
      戻り値: state.count + 1 };
    ケース '減少':
      戻り値: state.count - 1 };
    デフォルト：
      新しい Error() をスローします。
  }
};
定数UseReducer = () => {
  const [状態、ディスパッチ] = useReducer(リデューサー、初期状態);

  戻る （
    <div className="アプリ">
      <div>useReducer カウント:{state.count}</div>
      <button onClick={() => { dispatch({ type: 'decrement' }); }}>useReducer の削減</button>
      <button onClick={() => { dispatch({ type: 'increment' }); }}>useReducer increase</button>
    </div>
  );
};

デフォルトのUseReducerをエクスポートします。

インターフェース状態タイプ{
  カウント: 数
}
インターフェースアクションタイプ{
  タイプ: 文字列、
  ペイロード?: 番号
}
定数initCount = 0 
定数 init = (initCount:数値)=>{
  {count:initCount} を返す
}
const リデューサー = (状態:状態タイプ、アクション:アクションタイプ)=>{
  スイッチ(アクション.type){
    ケース '増分':
      {count: state.count + 1} を返します
    ケース '減少':
      {count: state.count - 1} を返します
    ケース 'リセット':
      init(action.paylod || 0) を返します
    デフォルト：
      新しい Error() をスローします。
  }
}
定数UseReducer = () => {
  const [状態、ディスパッチ] = useReducer(reducer、initCount、init)

  戻る （
    <div className="アプリ">
      <div>useReducer カウント:{state.count}</div>
      <button onClick={()=>{dispatch({type:'decrement'})}}>useReducer の Reduce</button>
      <button onClick={()=>{dispatch({type:'increment'})}}>useReducer 増加</button>
      <button onClick={()=>{dispatch({type:'reset',paylod:10 })}}>useReducer の追加</button>
    </div>
  );
}
デフォルトのUseReducerをエクスポートします。

// 子コンポーネント const ChildComp = () => {
  console.log('ChildComp...');
  戻り値: (<div>ChildComp...</div>);
};

// 親コンポーネント const Parent = () => {
  定数[count, setCount] = useState(0);

  戻る （
    <div className="アプリ">
      <div>こんにちは世界{count}</div>
      <div onClick={() => { setCount(count => count + 1); }}>クリックして増加</div>
      <チャイルドコンプ/>
    </div>
  );
};

デフォルトの親をエクスポートします。

// 子コンポーネント const ChildComp = () => {
  console.log('ChildComp...');
  戻り値: (<div>ChildComp...</div>);
};

定数 MemoChildComp = memo(ChildComp);

React をインポートします。{ memo, useState } から 'react';

// 子コンポーネント const ChildComp = (info:{info:{name: string, age: number}}) => {
  console.log('ChildComp...');
  戻り値: (<div>ChildComp...</div>);
};

定数 MemoChildComp = memo(ChildComp);

// 親コンポーネント const Parent = () => {
  定数[count, setCount] = useState(0);
  const [名前] = useState('jack');
  定数[年齢] = useState(11);
  const info = { 名前、 年齢 };

  戻る （
    <div className="アプリ">
      <div>こんにちは世界{count}</div>
      <div onClick={() => { setCount(count => count + 1); }}>クリックして増加</div>
      <MemoChildComp 情報 = {情報} />
    </div>
  );
};

デフォルトの親をエクスポートします。

'react' から React、{ memo、useMemo、useState } をインポートします。

// 子コンポーネント const ChildComp = (info:{info:{name: string, age: number}}) => {
  console.log('ChildComp...');
  戻り値: (<div>ChildComp...</div>);
};

定数 MemoChildComp = memo(ChildComp);

// 親コンポーネント const Parent = () => {
  定数[count, setCount] = useState(0);
  const [名前] = useState('jack');
  定数[年齢] = useState(11);
  
  // オブジェクトのプロパティをラップするには useMemo を使用します const info = useMemo(() => ({ name, age }), [name, age]);

  戻る （
    <div className="アプリ">
      <div>こんにちは世界{count}</div>
      <div onClick={() => { setCount(count => count + 1); }}>クリックして増加</div>
      <MemoChildComp 情報 = {情報} />
    </div>
  );
};

デフォルトの親をエクスポートします。

'react' から React、{ memo、useMemo、useState } をインポートします。

// 子コンポーネント const ChildComp = (props:any) => {
  console.log('ChildComp...');
  戻り値: (<div>ChildComp...</div>);
};

定数 MemoChildComp = memo(ChildComp);

// 親コンポーネント const Parent = () => {
  定数[count, setCount] = useState(0);
  const [名前] = useState('jack');
  定数[年齢] = useState(11);
  const info = useMemo(() => ({ 名前、年齢 }), [名前、年齢]);
  定数changeName = () => {
    console.log('出力名...');
  };

  戻る （
    <div className="アプリ">
      <div>こんにちは世界{count}</div>
      <div onClick={() => { setCount(count => count + 1); }}>クリックして増加</div>
      <MemoChildComp 情報={情報} 変更名={変更名}/>
    </div>
  );
};

デフォルトの親をエクスポートします。

'react' から React、{ memo、useCallback、useMemo、useState } をインポートします。

// 子コンポーネント const ChildComp = (props:any) => {
  console.log('ChildComp...');
  戻り値: (<div>ChildComp...</div>);
};

定数 MemoChildComp = memo(ChildComp);

// 親コンポーネント const Parent = () => {
  定数[count, setCount] = useState(0);
  const [名前] = useState('jack');
  定数[年齢] = useState(11);
  const info = useMemo(() => ({ name, age }), [name, age]);
  定数changeName = useCallback(() => {
    console.log('出力名...');
  }, []);

  戻る （
    <div className="アプリ">
      <div>こんにちは世界{count}</div>
      <div onClick={() => { setCount(count => count + 1); }}>クリックして増加</div>
      <MemoChildComp 情報={情報} 変更名={変更名}/>
    </div>
  );
};

デフォルトの親をエクスポートします。

'react' から React をインポートします。{useRef、useEffect}。
定数 Page1 = () => {
  const myRef = useRef<HTMLInputElement>(null);
  使用効果(() => {
    myRef?.current?.focus();
  });
  戻る （
    <div>
      <span>使用参照:</span>
      <input ref={myRef} タイプ="text"/>
    </div>
  );
};

デフォルトのページ1をエクスポートします。

'react' から React、{useRef、useEffect、useState } をインポートします。
定数 Page1 = () => {
    定数 myRef2 = useRef(0);
    定数[count, setCount] = useState(0)
    使用効果(()=>{
      myRef2.current = カウント;
    });
    関数handleClick(){
      タイムアウトを設定します(()=>{
        console.log(カウント); // 3
        コンソールログ(myRef2.current); // 6
      },3000)
    }
    戻る （
    <div>
      <div onClick={()=> setCount(count+1)}>クリック数</div>
      <div onClick={()=> handleClick()}>表示</div>
    </div>
    );
}

デフォルトのページ1をエクスポートします。