React Hook

正式文書の読み取りと整理

なぜHookを使うのですか?

構成部品間でステータスロジックを再利用するのは難しい.
Hookは素子抽象状態論理を許可する.すなわち、複数のコンポーネントでは、重複する論理をフックとして作成し、使用をインポートして独立したテストと再利用を実現できます.
Hookは、階層を変更せずにステータス関連ロジックを再使用するのに役立ちます.

複雑な要素は理解しにくい.
ライフサイクルメソッドに基づいて論理を分割すると、関連のない論理が含まれ、エラーが発生しやすく、整合性が損なわれます.Hookによって素子を互いに似たような小関数配列に分割する方法を用いることができる.(データインポート、サブスクリプション設定)reducerを使用して、構成部品の領域ステータス値を管理して、これらの論理を追跡することもできます.

無分類の反応機能を使用するために.

State Hook

1つの構成部品内で複数のState Hookを宣言でき、各setterと同じ方法で宣言できます.userSateを使用して初期値を指定すると、最初のレンダリングでのみ使用されます.

function ExampleWithManyStates() {
  // 상태 변수를 여러 개 선언했습니다!
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
  // ...
}

Effect Hook

Reactコンポーネントでデータをインポートまたは購読し、DOMを直接操作する操作を副作用または影響と呼ぶ.これは、他の構成部品に影響を与える可能性があり、レンダリング中には実現できません.useEffectは、これらのタスクを実行するために、クラス内のライフサイクルが1つに統合される.レンダリング後に効果を実行する

Hookのルールを使う

最高レベルでのみHook(

)

が呼び出されます.

応答関数要素内でのみHookを呼び出す;

Custom Hook

useから、中で他のhookを呼び出すと、custom hook.

Reducer Hook

stateが関連付けられている場合

const initialState = {count: 0};

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}

type、payloadをdispatchで受信し、reducerを実行することができる.
reducerが現在のステータスと同じ値を返すと、reactはサブアイテムを再表示したり、影響を与えたりしません.

useCallback

コメントが完了したコールバックを返します.コールバックの依存性が変更された場合にのみバージョンが更新され、不要なレンダリングが減少します.

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

useMemo

作成関数と依存配列を渡すと、コメントは解析された値を返します.アノテーションの現在の値は、依存性が変化した場合にのみ再計算されるため、レンダリング時の高コスト計算を回避して最適化できます.
userMemoに渡される関数はレンダリング中に実行されるため、この関数ではレンダリング中に実行されない操作は実行できません.(ex.側面効果)

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

useRef

保守が容易な可変値

const hideBy = useRef<HideBy | null>(null);