React の 10 個のフックの紹介

'react' から React をインポートします。
'./App.css' をインポートします。
//通常は状態を変更するクラスを記述します class App extends React.Component {
  コンストラクタ(props){
    スーパー(小道具)
    この状態 = {
      フック:「Reactフックは本当に便利です」
    }
  }
  チェンジフック = () => {
    this.setState({
      フック: 「Reactフックの値を変更しました」
    })
  }
  与える （） {
    const { フック } = this.state
    戻る（
         <header className="アプリヘッダー">
          {フック}
          <ボタンのonClick={this.changehook}>
            フックの変更
          </ボタン>
        </ヘッダー>
      ）
  }
}
{App} をエクスポートする

//関数型の記述、状態の変更 function App() {
//hookという変数を作成しました。sethookメソッドはこの変数を変更することができます。初期値は「React hookは本当に便利です」です。
 const [hook, sethook] = useState("React hook は本当に便利です");
  戻る （ 
    <header className="アプリヘッダー">
      {hook}**ここでの変数とメソッドは直接使用することもできます*/
      <button onClick={() => sethook("Reactフックの値を変更しました")}>
        フックの変更
      </ボタン>
    </ヘッダー>
  );
}
{App} をエクスポートする

// 矢印関数の記述、状態の変更 export const App = props => {
  const [hook, sethook] = useState("React hook は本当に便利です");
  戻る （
    <header className="アプリヘッダー">
      {フック}
      <button onClick={() => sethook("Reactフックの値を変更しました")}>
        フックの変更
      </ボタン>
    </ヘッダー>
  );
};

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

//矢印関数の記述、状態の変更 const UseEffect = (props) => {
 //hookという変数を作成しました。sethookメソッドはこの変数を変更することができます。初期値は「React hookは本当に便利です」です。
 const [ hook, sethook ] = useState('react hook は本当に便利です');
 const [ name ] = useState('baby张');
 戻る （
  <header className="UseEffect-header">
   <h3>効果を使用する</h3>
   <子フック={hook} 名前={name} />
   上記の変数と以下のメソッドも直接使用できます*/
   <button onClick={() => sethook('Reactフックの値を変更しました' + new Date().getTime())}>フックを変更</button>
  </ヘッダー>
 );
};

const 子 = (props) => {
 定数[newhook、setnewhook] = useState(props.hook);
 //これは以前のcomponentDidMountを置き換えることができます。2番目のパラメータは空の配列で、useEffectが1回だけ実行されることを示しますuseEffect(() => {
  console.log('最初のコンポーネントがマウントされました');
 }, []);

 // 2 番目のパラメータである配列はフックです。フックが変更されると、useEffect がトリガーされます。フックが変更されると、まずフックが破棄され、次に最初の関数が実行されます。
 使用効果(
  () => {
   新しいフックを設定します(props.hook + '222222222');
   コンソールにログ出力します。
   戻り値 () => {
    console.log('componentWillUnmount');
   };
  },
  [ props.hook ]
 );

 //useLayoutEffect は useeffect の実行を同期的に実行し、最初に useLayoutEffect 内の関数 useLayoutEffect を実行します。
  () => {
   コンソールにログ出力します。
   戻り値 () => {
    console.log('useLayoutEffect コンポーネントをアンマウントします');
   };
  },
  [ props.hook ]
 );

 戻る （
  <div>
   <p>{props.name}</p>
   {新しいフック}
  </div>
 );
};

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

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

const Child = ({ 年齢, 名前, 子供 }) => {
    //useMemo を処理に使用しない場合は、親コンポーネントの状態が変化すると、子コンポーネントが 1 回レンダリングされます。useMemo を使用すると、特定の状態名を監視できます。名前が変化するときは、useMemo の最初の関数を実行します。console.log(age, name, children, '11111111');
 関数名変更() {
  console.log(年齢、名前、子供、'22222222');
  名前 + 'change' を返します。
    }
     ** react公式サイトではuseCallbackとuseMemoは似たような機能があると書いてありますが、バージョンの問題なのかわかりません。この方法はまだ使えません。const memoizedCallback = useCallback(
        () => {
            コンソールログ('useCallback')
        },
        [名前]、
      );
    console.log(メモ化されたコールバック、'メモ化されたコールバック')
     */
    //useMemo には、useEffect と同様に 2 つのパラメーターがあります。最初のパラメーターは関数、2 番目のパラメーターは配列で、変化しない状態を監視するために使用されます。const changedname = useMemo(() => namechange(), [ name ]);
 戻る （
  <div style={{ border: '1px solid' }}>
   <p>子供: {子供}</p>
   <p>名前: {name}</p>
   <p>変更: {changedname}</p>
   <p>年齢:{年齢}
  </div>
 );
};

定数UseMemo = () => {
    //useState は名前と年齢を設定し、2 つのボタンを使用してそれらを変更し、子コンポーネントに渡します。const [ name, setname ] = useState('baby张'); 
 const [ age, setage ] = useState(18);
 戻る （
  <div>
   <ボタン
    クリックすると{() => {
     setname('baby张' + new Date().getTime()); 
    }}
   >
    名前を変更する</button>
   <ボタン
    クリックすると{() => {
     setage('age' + new Date().getTime());
    }}
   >
    年齢を変更する</button>
   <p>
    メモを使う {名前}:{年齢}
   </p>
   <お子様の年齢={age}、名前={name}>
    {name} の子供
   </子>
  </div>
 );
};

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

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

定数UseRef = () => {
 //ここでuseStateは入力をバインドし、状態名を関連付けます
 const [ name, setname ] = useState('baby张');
 const refvalue = useRef(null); // 最初に空のuseRefを作成します
 関数addRef() {
  refvalue.current.value = name; // ボタンをクリックしたときにこの ref に値を割り当てます // refvalue.current = name // このように記述すると、ref が DOM にバインドされていない場合でも、作成された ref に値が存在し、使用できるようになります console.log(refvalue.current.value);
 }
 戻る （
  <div>
            <入力
                デフォルト値={名前}
    onChange={(e) => {
     setname(e.target.value);
                }}
   />
   <button onClick={addRef}>以下に名前を入力してください</button>
   <p>UseRef 名を入力してください:</p>
   <入力ref={refvalue} />
  </div>
 );
};

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

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

定数コンテキスト名 = createContext();
//ここでは、ブログの便宜上、おじいちゃんコンポーネントと孫コンポーネントを 1 つのファイルに記述しています。通常は、おじいちゃんコンポーネントと孫コンポーネントによって作成されるコンテキストを 1 つずつ導入する必要があります。

定数UseContext = () => {
 //ここで useState は状態を作成し、ボタンは変更を制御します const [ name, setname ] = useState('baby张');
 戻る （
  <div>
   <h3>UseContext おじいちゃん</h3>
   <ボタン
    クリックすると{() => {
     setname('baby张' + new Date().getTime());
    }}
   >
    名前の変更</button>
   これはコンテキストの使用法と同じです。プロバイダーは子コンポーネントに値を渡す必要があります。値は必ずしもパラメータである必要はありません*/}}
   <ContextName.Provider 値 = {{ name: name, age: 18 }}>
    **変数を使用する必要があるサブコンポーネントは、共有を実現するためにプロバイダーの途中で記述する必要があります*/
    <子供 />
   </コンテキスト名.プロバイダー>
  </div>
 );
};

定数子 = () => {
 //息子コンポーネントを作成し、孫コンポーネントを導入する return (
  <div style={{ border: '1px solid' }}>
   子供
  </div>
 );
};

定数ChildChild = () => {
 // 孫コンポーネントを作成し、孫コンポーネントの状態を受け入れ、useContext を使用して孫コンポーネントによって作成された ContextName の値を取得します。let childname = useContext(ContextName);
 戻る （
  <div style={{ border: '1px solid' }}>
   子供 子供 孫
    {子供の名前}:{子供の名前の年齢}
   </p>
  </div>
 );
};

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

'react' から React、{useState、useReducer、useContext、createContext } をインポートします。

// stroe の型と初期化値を初期化し、reducer を作成します
定数 ADD_COUNTER = 'ADD_COUNTER';
定数initReducer = {
 カウント: 0
};
//通常のリデューサーの記述 function Reducer(state, action) {
 スイッチ（アクションタイプ）{
  ADD_COUNTERの場合:
   戻り値 { ...状態、カウント: 状態.count + 1 };
  デフォルト：
   状態を返します。
 }
}

CountContext を作成します。
//上の段落では、状態が初期化され、リデューサーがコンテキストを作成します。別のファイルに記述することもできます。ここでは、理解しやすいように、ファイルに記述します。const UseReducer = () => {
 const [ name, setname ] = useState('baby张');
 //親コンポーネントで useReducer を使用します。最初のパラメーターはリデューサー関数、2 番目のパラメーターは状態です。返される値は状態とディスパッチです。
 const [ 状態、ディスパッチ ] = useReducer(reducer、initReducer);
 戻る （
  <div>
   リデューサーを使用する
   ここで、コンテキストを介してリデューサーと状態を子コンポーネントに渡します*/
   <CountContext.Provider 値 = {{ 状態、ディスパッチ、名前、セット名 }}>
    <子供 />
   </CountContext.Provider>
  </div>
 );
};

定数子 = () => {
 //通常のコンテキスト受け入れと同様に、親コンポーネントの値を受け入れ、イベントなどを通じてリデューサーをトリガーし、redux 効果を実現します。const { state, dispatch, name, setname } = useContext(CountContext);
 関数handleclick(count) {
  ディスパッチ({ タイプ: ADD_COUNTER、カウント: 17 });
  setname(count % 2 == 0 ? 'babybrother' : 'baby张');
 }
 戻る （
  <div>
   <p>
    {name} は今年 {state.count} 歳になります</p>
   <button onClick={() => handleclick(state.count)}>成長しました</button>
  </div>
 );
};

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