反応スキルの整理(8-1)

11812 ワード
はんのうぎじゅつ React テキストリンク
第七章と関連がある概念がますます重要になる
Chapter 08 : Hooks (1)
🎯 useState
関数
  • は、状態を現在の状態と2番目のパラメータに変換する
  • の状態を変更するときは常に
    • のままである.
  • の前で再放送...
    • 🎯 useEffect
  • 反応素子がレンダリングされるたびに、特定の動作
    • が実行する.
  • マウント時コンポーネントDidMount
  • 更新時コンポーネントDidUpdate
    • 1.インストール時、更新時に2つのUseEffect Hookをマージ

  • サンプルコード
    import React, { useEffect, useState } from 'react';

const Info = () => {
const [name, setName] = useState('');
const [nickname, setNickname] = useState('');

useEffect(() => {
    console.log({
    name,
    nickname,
    });
});

const onChangeName = (e) => {
    setName(e.target.value);
};
const onChangeNickName = (e) => {
    setNickname(e.target.value);
};

  return (
      <div>
      <div>
          <input placeholder="이름" onChange={onChangeName} />
          <input placeholder="닉네임" onChange={onChangeNickName} />
      </div>
      <div>
          <b>이름 : {name}</b>
      </div>
      <div>
          <b>닉네임 : {nickname}</b>
      </div>
      </div>
  );
};

export default Info;
    • 2.インストール時のみ使用するEffect Hook

  • useEffect関数の2番目のパラメータを使用して空の配列を配置します.

  • console.コンソールは初めてlogをレンダリングしたときにのみ撮影され、inputを変更したときには撮影されません.
    useEffect(() => {
    console.log({
    name,
    nickname,
    },[]);
});
    • 3.特定の値を更新した場合にのみ実行されるUserEffect
  • userEffect関数の2番目のパラメータに、更新時にチェックしたい値を追加します.
  • nameを設定すると、name inputが変更された場合にのみコンソールが撮影されます.ニックネームinput変更後コンソール
    • を撮らない
  • が管理する州のほか、受け取った道具を加えることもできます.
    useEffect(() => {
    console.log({
    name,
    nickname,
    },[name]);
});
    • 4.後整理関数

  • クリーンアップ関数に戻って、アンインストール前と更新前の操作を実行します.

  • アンインストール、親構成部品の可視性を追加して更新する
    const App = () => {
const [visible, setVisible] = useState(false);

const onClick = () => {
    setVisible(!visible);
};

  return (
      <div>
      <button onClick={onClick}>{visible ? '보이기' : '숨기기'}</button>
      <hr />
      {visible && <Info />}
      </div>
  );
};

  • クリーンアップ関数の適用
    useEffect(() => {
    console.log('일반 상황1 -> 마운트되어서 Info 컴포넌트가 보일 때');
    console.log('일반 상황2 -> 정보가 업데이트 될 때');
    return () => {
    console.log('뒷정리 함수 상황1 : 언마운트 되어서 숨기려할 때');
    console.log(
        '뒷정리 함수 상황2 -> 업데이트 되기 직전에. 즉 input에 값 입력해도 업데이트 직전인 상황나옴. 리액트 -> 리액ㅌ'
    );
    console.log('상황 2는 2번째 배열에 값에 따라 달라짐');
    };
}, [name]);
  • 一般1:インストール後にInfoコンポーネントが表示する場合
    • を表示する.
  • 一般2:情報が更新されたとき.(userEffectの2番目のパラメータに依存)
  • 後整理関数1:アンインストール時に
    • を隠す
  • 後整理関数2:更新前.すなわち,inputに値を入力しても更新前の場合がある.はんのう(userEffectの2番目のパラメータに依存)
    • 🎯 useReducer
  • 異なる状態を異なる素子の状況に応じて更新必要がある場合、
    • .
    これまでonClickイベントなどのクリックのみで値が更新されていました.
  • reducer(state, action). (現在の状態と更新に必要な情報を含む動作)
    • .
  • の動作値を受信して新しい状態に変換する->
    • を一定に保つ.
  • タイプのフィールドが必要です.
    • のアクションを教えてください.
  • 素子の外に関数
    • として設定.
  • UseReducerの最大の利点:構成部品の更新ロジックを構成部品から除外します.
    • 1.カウンタの実装
    function reducer(state, action) {
  switch (action.type) {
      case 'INCREASE':
      return { value: state.value + 1 };
      case 'DECREASE':
      return { value: state.value - 1 };
      default:
      return state;
  }
}

  const Counter = () => {
  const [state, dispatch] = useReducer(reducer, { value: 0 });

  return (
      <div>
      <p>현재 카운터 값 : {state.value}</p>
      <button onClick={() => dispatch({ type: 'INCREASE' })}>+1</button>
      <button onClick={() => dispatch({ type: 'DECREASE' })}>-1</button>
      </div>
  );
};

  • コード解析
    function reducer(state, action) {
switch (action.type) {
    case 'INCREASE':
    return { value: state.value + 1 };
    case 'DECREASE':
    return { value: state.value - 1 };
    default:
    return state;
}
}
  • 素子の外に関数
    • として設定.
  • UseReducerの最大の利点:構成部品の更新ロジックを構成部品から除外します.
    • Reducerのデフォルト値
  • を返します.
    const [state, dispatch] = useReducer(reducer, { value: 0 });
  • 州が現在指している状態.
  • dispatchは励起動作の関数
    • である.
  • userReducer(reducer,{value:0}):reduceは外部のreduce関数です.valueは減速機のデフォルト値
    • です.
    <button onClick={() => dispatch({ type: 'INCREASE' })}>+1</button>
<button onClick={() => dispatch({ type: 'DECREASE' })}>-1</button>

  • タイプをパラメータとしてdispatch関数に入れるとreducer関数が呼び出されます.
    • 2.入力状態の管理

  • reduce関数
    function reducer(state, action) {
return {
    ...state,
    [action.name]: action.value,
};
}
  • 拡張演算子を使用してステータスコピー(不変)
    • を行います.
  • アクションを使用してe.targetタイプを受信し、オブジェクト内で[]で鍵をラップし、自分で鍵
    • を作成する.

  • 構成部品
    const Info = () => {
const [state, dispatch] = useReducer(reducer, {
    name: '',
    nickname: '',
});

const { name, nickname } = state;

const onChange = (e) => {
    dispatch(e.target);
};

return (
    <div>
        <input
          name="name"
          value={name}
          onChange={onChange}
        />
        <input
          name="nickname"
          value={nickname}
          onChange={onChange}
        />
    </div>
};
  • name,設定値後,e.target自体をdispatchのタイプとして
    • 転送する.
    反応の基礎:コンポーネント間のデータの通過
    フラスコを使用したニュースアプリケーションの作成