220322 React Hooks

18679 ワード
React TIL テキストリンク

Side Effectとは?

  • React構成部品をスクリーンで初めてレンダリングすると、非同期処理の付随効果が必要になります.
  • 非同期:順序に従って動作しない
  • 容易に関数を呼び出す場合、外部ではなく関数内部に影響を与える
    • を指す.
    let a= 0;
function sideEffect() {
  a++;
}
sideEffect()
  • sideEffectは、パラメータaを1だけ増やすのではなく、
    • を返します.
  • 関数を用いて外部走査における変数aを修正する
    • .
  • このように外部状態を変化することを「Side Effect」
    • という.

  • では、なぜ使用しているジェネリック素子を関数型素子に変更しなければならないのでしょうか.
  • 類語法難
  • を縮小するのは難しい
  • 関数を使用するか使用しないかで、イベントハンドラの登録方法が異なります.
  • コードの再利用性が悪く、コード配置が困難である

  • クラス構成部品と異なり、関数構成部品ではlifeCycleの使用と管理が困難であるため、Hooksはこれを補足としています.

    • 「Hooksの削除」とは?

  • 応答16.8バージョンで追加された応答ライブラリ使用方法
  • Hookの出現に伴い、関数型素子においても状態管理が可能となり、ライフサイクルに関する関数
    • を用いることができる.
  • 以下は、本書のサンプルコード
    • である.
  • は毒性がより良く、長さも
    • と異なる.
    // Function component(Hook)
import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
    // Class component
class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  componentDidMount() {
    document.title = `You clicked ${this.state.count} times`;
  }
  componentDidUpdate() {
    document.title = `You clicked ${this.state.count} times`;
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

    Hooks使用規則

  • の最上階でのみHookを呼び出す
    繰り返し文、条件文、ネスト関数でHookを実行
  • 応答関数要素のみでHookを呼び出す

    useState

  • 最も基本的で、最も核心的なHookの一つ:
    • const [state, setState] = useState(initialState);
  • 状態保持値とその更新関数
    • を返す.
  • の最初のレンダリング時に返される状態は、最初の伝達パラメータ(初期状態)の値
    • である.
  • setState関数ステータスの更新
  • の新しい状態値を受け入れる登録シンボルツリーレンダリング

    • 追加2,234

    import React, { useState } from 'react';

function Counter() {
  const [number, setNumber] = useState(0);

  const onIncrease = () => {
    setNumber(prevNumber => prevNumber + 1);
  }

  const onDecrease = () => {
    setNumber(prevNumber => prevNumber - 1);
  }

  return (
    <div>
      <h1>{number}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}

export default Counter;
    上記のコード例
  • に示すように、
    onIncreaseとonDecreaseでsetNumberを使用する場合
    次の状態をパラメータとして使用するのではなく、
    値を更新する関数をパラメータとして使用することもできます.

    • useEffect


  • 反応素子をレンダリングするたびに特定の操作を実行する機能を設定できます.
  • Reactは、私たちが渡した関数(「effect」と呼ばれる)を覚えています.
    DOM更新が完了すると読み込みます:react正式ドキュメント説明

  • userEffectは、最初のレンダリング以降のすべての更新で実行されます.
    レンダー後に
  • 効果
    • が生成されます.
  • の有効化時にDOM
    • が更新されていることを確認します.
  • UseEffectはライフサイクル関数と多くの関係がある
    • 
//함수형 컴포넌트
import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
    匿名関数のいきさつを理解するコードがあります
    3つの数の中の最大数を求めます