ホークスとは?

reactは本来関数型素子とクラス素子をサポートしているが,StateやLife Cycleのような機能はクラス素子のみをサポートしているため,事実上クラス素子を強制している.
そしてReact 16.8バージョンからReact Hooksが登場.正式な文書では、Hookは関数コンポーネントにReact Stateとライフサイクル機能(Lifecycle Features)を「バインド」できる関数として定義されています.簡単に言えば、関数コンポーネントにStateやLife Cycleなどの機能を使用することができます.

なぜHooksを使うのですか?

Reactを習い始めたとき、Hooksが登場して2年になるので、クラス素子を深く勉強したり使ったりしたことはありませんでしたが、Hooksが現れたのはクラス素子を使っている開発者が気分が悪いからです.公式文書にはHooks開発の3つの理由が記載されている.

クラス素子間では状態に関連する論理を再利用することは困難である. 複雑な要素は理解しにくい。 Classは人と機械を混同している。

また、React公式文書では、将来クラスコンポーネントのサポートを継続するか、Hooksを使用することを強くお勧めします.これも私がクラスの要素を深く勉強していない理由です.

よく使うHook

Reactは11個程度の内蔵Hooksをサポートしており、React公式ドキュメントでは主にその中の2つのHookを紹介しています.1つ目はState Hook 2つ目はEffect Hookこの二人が一番重要なHookだからか、公式文書に説明ページがあるのは彼らだけだ.

State Hook

State Hookはクラス構成部品のthisです.stateとthis.setState機能は、関数型素子の関数にも使用できます.次のコードを見てみましょう.

const Counter = () => {
  const [count, setCount] = useState(0);
  const onIncrease = () => { setCount(count + 1) };
  
  return (
    <>
      <span>{count}</span>
      <button onClick={onIncrease}>증가</button>
    </>
  );
};

useState関数はState Hook関数です.useState関数はinitialstateをパラメータ形式で受信し、stateとstateを更新できる関数を配列形式で返します.したがって,[count,setCount]などの配列構造分解構文を用いて返される値を受信する.
その後、state値は<span>{count}</span>のように使用することができる.クラス構成部品では、stateはコンストラクション関数にあるため、{this.state.cont}とともに使用する必要があります.関数型構成部品は、より直感的に使用できます.
次はonCilck Handler、onIncrease関数付きbuttonです.onIncrease関数は呼び出し時にsetCount関数を呼び出しcountの値を1増加させる.ステータスはsetCount+1という単純な形式で更新できます.クラス部品なら、これ.ステータスはsetState({count:this.state.cont+1})と同じ形式で更新する必要があります.単純にコード量が多いからもう疲れています.
また、クラス構成部品はstateのみをオブジェクト形式として宣言し、stateオブジェクト内で構成部品のすべての状態を宣言する必要があります.逆に、ユーザーステータスホストは、任意の形式のデータをステータスとして宣言したり、ユーザーステータスホストを複数回呼び出すことができます.この部分はState関連ロジックの再利用性を高めたと思います.

useEffect Hook

本書では、Effect Hookは、関数型素子のSide Effectを実行するHookである.また、クラス構成部品のライフサイクルでは、構成部品DidMountを構成部品DidUpdate、構成部品WillUnmountと組み合わせることができます.もちろん、この3つのライフサイクルはSide Effectを許可します.
正直この文章を書く前にSide Effectが何なのか分からなかった.実は今もよくわからない近いうちにSide Effectを位置決めします.
本書はSide Effectの一例であり、外部APIにデータをインポートしたり、店舗からデータを購読したり、DOMオブジェクトを操作したりするなどを含む.
次のコードは、React公式ドキュメントのUserEffectのサンプルコードです.

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

  // componentDidMount, componentDidUpdate와 같은 방식으로
  useEffect(() => {
    // 브라우저 API를 이용하여 문서 타이틀을 업데이트합니다.
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

userEffectのパラメータとして匿名関数を与え,匿名関数内部ではdocumentである.タイトルを更新しています.この匿名関数は、構成部品の列挙が完了したときに実行されます.したがって、DOMオブジェクトにもアクセスできます.レンダリングのたびに実行されます.これはクラスコンポーネントのコンポーネントDidMountとコンポーネントDidUpdateの組み合わせと見なすことができます.
Effect HookはClean-Up機能も提供しています.サンプルコードをもう一度見てください.

function FriendStatus(props) {
  const [isOnline, setIsOnline] = useState(null);

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    // effect 이후에 어떻게 정리(clean-up)할 것인지 표시합니다.
    return function cleanup() {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

  if (isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';

userEffectのコールバック関数はclean-up時に起動する関数を返します.クラスコンポーネントのコンポーネントWillUnmountと似ていますが、明らかに異なります.componentWillUnmountは、この構成部品がDOMから削除されたときに実行されます.でもuserEffectはどうですか?構成部品を再レンダリングするたびに実行されます.公式文書によると、これは意図的で、誤りを減らすことを目的としている.次のコードを見てみましょう.

class FriendStatusWithCounter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0, isOnline: null };
    this.handleStatusChange = this.handleStatusChange.bind(this);
  }

  componentDidMount() {
    document.title = `You clicked ${this.state.count} times`;
    ChatAPI.subscribeToFriendStatus(
      this.props.friend.id,
      this.handleStatusChange
    );
  }

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

  componentWillUnmount() {
    ChatAPI.unsubscribeFromFriendStatus(
      this.props.friend.id,
      this.handleStatusChange
    );
  }

  handleStatusChange(status) {
    this.setState({
      isOnline: status.isOnline
    });
  }
  // ...

ComponentDidMountからAPIを購読し、propsのidをパラメータとしてIDを持つFirendのオンライン状態を更新するComponentWillUnmountから購読を解除するコンポーネントがある.しかし、スクリーンで素子をレンダリングするときにid propsを変更した場合は?コンポーネントは、再レンダリングされますが、再レンダリング前のidを持つFirendデータを購読します.マウントおよびアンインストール時のライフサイクルメソッドのみが設定されているため、再描画時のライフサイクルメソッドは設定されていません.idpropsを変更するたびにidのfriendを購読し、以前のidのfired購読をキャンセルするには、ライフサイクルメソッドを設定する必要があります.

 componentDidMount() {
    ChatAPI.subscribeToFriendStatus(
      this.props.friend.id,
      this.handleStatusChange
    );
  }

  componentDidUpdate(prevProps) {
    // 이전 friend.id에서 구독을 해지합니다.
    ChatAPI.unsubscribeFromFriendStatus(
      prevProps.friend.id,
      this.handleStatusChange
    );
    // 다음 friend.id를 구독합니다.
    ChatAPI.subscribeToFriendStatus(
      this.props.friend.id,
      this.handleStatusChange
    );
  }

  componentWillUnmount() {
    ChatAPI.unsubscribeFromFriendStatus(
      this.props.friend.id,
      this.handleStatusChange
    );
  }

コンポーネントDidUpdateは、構成部品が再レンダリングされたときに実行されます.したがって、idpropsが変更されると、コンポーネントが再レンダリングされ、前のfriendの購読がキャンセルされ、現在のprops idを持つfriendが購読されます.
Effect Hookに戻り、Effect HookのClean-Up関数とComponentWillUnmountの違いを理解しますか?Effect HookのClean-Up関数は、構成部品が再レンダリングされる前に実行されます.上記のライフサイクルをEffect Hookと表します.以下に示します.

useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

コンポーネントをレンダリングするとfiredが購読され、レンダリング前に購読が解除されます.コード量が減少しただけでなく、これらはすべてuseEffect関数で発生しているため、論理の再利用性や可読性が改善されています.
クラス構成部品のライフサイクルでは、この作業を完了するために複数のライフサイクルメソッドを使用しています.したがって、論理を再使用するには、いくつかのパッケージが必要です.

私の結論

この記事では,Hookが出現した原因,クラス素子の欠点などを理解した.もっと高級な部品を使う理由はないと思いますが、Hookを一生懸命勉強すべきだと思います.一方、いつか開発者たちがHooksも不便で新しいもっと良いものを創造することを期待しています.

リファレンスサイト

React公式文書