Hooks

Hooks ? クラス構成部品のステータス管理とライフサイクル管理機能は、関数型構成部品でも実現可能な関数です.
class素子と関数素子の違い
関数コンポーネントはクラスコンポーネントよりも宣言しやすく、メモリリソースもクラスよりもstateと
ライフサイクルapiが使用できないという欠点があります.
この欠点は反応v.16.8を更新した後にHooks機能を導入することによって解決される
このバインディングは、クラス構成部品の作成時に発生します.
JavaScript継承クラスの場合はsuper()を呼び出す必要があります.これらの規則に従って、クラス構成部品もsuper(props)を呼び出す.
この欠点を解決するために、関数要素にステータスとライフサイクルメソッド管理機能を追加することを提案する人がいます.これにより、Hooksが発生します.
含む.

Hooksのメリット

Hookは、props、state、context、refs、ライフサイクルなどの応答概念により直感的なAPIを提供します.

classを使用するには、JavaScriptのthisキーワードの動作原理を理解する必要があります.
また、コードの再利用性と構成性は非常に困難であり、私のユーザーはprops、state、top-downデータストリームを改善すると同時に、クラスを理解することも難しいと思います.

電子書籍は大体2種類あります.1.応答プログラムHooks 2を内蔵.カスタム
まず、内蔵レスポンスプログラムを見てみましょう

useState:関数構成部品でstateを使用する場合、ステータスは可変です。

import React,{useState} from 'react'
const Count = () => {
  const [value,setValue] = useState(0);
  return (
    <div>
    <p>
    현재 카운터 값은 <b>{value}</b>입니다. 
</p>
<button onClick={() => setValue(value +1)}>+1 </button>
<button onClick={() => setValue(value -1)}>-1 </button>
</div>
);
};
export default count;

userEffect:ライフサイクルメソッドロールに似ています。

ComponentDidMountとComponentDidUpdateの組み合わせ
構成部品をレンダリングするたびに特定の操作を実行するように設定します.

import React, { useState, useEffect } from 'react';

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>
  );
}

useReducer:usStateよりも多くのステータスを他の値に更新するために使用されます。

import React, { useReducer } from "react";

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <>
      <h2>{state.count}</h2>
      <button onClick={() => dispatch({ type: "INCREMENT", step: 1 })}>
        증가
      </button>
      <button onClick={() => dispatch({ type: "DECREMENT", step: 1 })}>
        감소
      </button>
    </>
  );
}

userMemo:関数型素子での演算の最適化

// App.js

import Info from "./Info";

const App = () => {
  const [color, setColor] = useState("");
  const [movie, setMovie] = useState("");

  const onChangeHandler = e => {
    if (e.target.id === "color") setColor(e.target.value);
    else setMovie(e.target.value);
  };

  return (
    <div className="App">
      <div>
        <label>
          What is your favorite color of rainbow ?
          <input id="color" value={color} onChange={onChangeHandler} />
        </label>
      </div>
      <div>
        What is your favorite movie among these ?
        <label>
          <input
            type="radio"
            name="movie"
            value="Marriage Story"
            onChange={onChangeHandler}
          />
          Marriage Story
        </label>
        <label>
          <input
            type="radio"
            name="movie"
            value="The Fast And The Furious"
            onChange={onChangeHandler}
          />
          The Fast And The Furious
        </label>
        <label>
          <input
            type="radio"
            name="movie"
            value="Avengers"
            onChange={onChangeHandler}
          />
          Avengers
        </label>
      </div>
      <Info color={color} movie={movie} />
    </div>
  );
};

export default App;

const getColorKor = color => {
    console.log("getColorKor");
    switch (color) {
      case "red":
        return "빨강";
      case "orange":
        return "주황";
      case "yellow":
        return "노랑";
      case "green":
        return "초록";
      case "blue":
        return "파랑";
      case "navy":
        return "남";
      case "purple":
        return "보라";
      default:
        return "레인보우";
    }
  };

  const getMovieGenreKor = movie => {
    console.log("getMovieGenreKor");
    switch (movie) {
      case "Marriage Story":
        return "드라마";
      case "The Fast And The Furious":
        return "액션";
      case "Avengers":
        return "슈퍼히어로";
      default:
        return "아직 잘 모름";
    }
  };


const Info = ({ color, movie }) => {
  const colorKor = getColorKor(color);
  const movieGenreKor = getMovieGenreKor(movie);

  return (
    <div className="info-wrapper">
      제가 가장 좋아하는 색은 {colorKor} 이고, <br />
      즐겨보는 영화 장르는 {movieGenreKor} 입니다.
    </div>
  );
};

export default Info;



import React, { useMemo } from "react";

const colorKor = useMemo(() => getColorKor(color), [color]);
const movieGenreKor = useMemo(() => getMovieGenreKor(movie), [movie]);

useCallback:Hookのコアは、作成した関数を再使用し、メモリ化された関数を返すことです。

import React, { useState, useCallback } from "react";

const onChangeHandler = useCallback(e => {
    if (e.target.id === "color") setColor(e.target.value);
    else setMovie(e.target.value);
  }, []);

useref:refを関数素子で使いやすくし、DOMを直接参照するために使用します。

import { useState, useRef } from "react";

export default function UseRefSample1() {
  const countRef = useRef(null);
  const [Count, setCount] = useState(0);

  return (
    <div className="wrap">
        <h2>StopWatch 만들기</h2>
        <div>
            <div className="timer">Timer: {Count}ms</div>
            <button>Start</button>
            <button>Stop</button>
            <button>Reset</button>
        </div>
    </div>
  );
}

const startHandler = () => {
    countRef.current = setInterval(() => setCount((c) => c + 1), 100);
  };

  const stopHandler = () => {
    clearInterval(countRef.current);
    countRef.current = null;
  };

  const resetHandler = () => {
    stopHandler();
    setCount(0);
  };

import { useEffect, useRef, useState } from "react";

export default function UseRefSample2() {
  const [Msg, setMsg] = useState(null);
  return (
    <div className="wrap">
      <h2>Input Focus</h2>
      <p>
        <input placeholder="Name" />
      </p>
      <p>
        <input placeholder="Age" />
      </p>
      <button>Submit</button>
      {
          Msg === null ? "" 
          : Msg ?  <div className="msg">모두 입력되었습니다!</div> 
          : <div className="msg warning">모두 입력하세요!</div>
      }
    </div>
  );

Hooks使用規則

Hookは最上階からしか呼び出せません.繰り返し文、条件文、ネスト関数でHookを実行しないでください.
React関数構成部品のみでHookを呼び出す必要があります.一般

JavaScript関数はHookを呼び出すべきではありません.(Hookを呼び出す場所は1つだけです.それは自分で作成したCustom Hookです.後で説明します.)

カスタムショップ

開発の過程で,素子間で状態に関連する論理を再利用することが望ましい場合がある.この2つの方法とは異なり、Custom Hookは、構成部品ツリーに新しい構成部品を追加する必要はありません.
名前は「use」で始まり、で別のHookを呼び出します.

import { useState, useEffect } from 'react';

function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null);

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

    ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
    };
  });

  return isOnline;
}

https://ko.reactjs.org/docs/hooks-custom.html

clouser

関数が属するLexical Scopeを覚えておくことで、関数がLexical Scopeの外で実行されてもそのScopeの機能にアクセスできるようにします.

function useState(initialValue) {
  var _val = initialValue // _val은 useState에 의해 만들어진 지역 변수입니다.
  function state() {
    // state는 내부 함수이자 클로저입니다.
    return _val // state()는 부모 함수에 정의된 _val을 참조합니다.
  }
  function setState(newVal) {
    // 마찬가지
    _val = newVal // _val를 노출하지 않고 _val를 변경합니다.
  }
  return [state, setState] // 외부에서 사용하기 위해 함수들을 노출
}
var [foo, setFoo] = useState(0) // 배열 구조분해 사용
console.log(foo()) // 0 출력 - 위에서 넘긴 initialValue
setFoo(1) // useState의 스코프 내부에 있는 _val를 변경합니다.
console.log(foo()) // 1 출력 - 동일한 호출하지만 새로운 initialValue

注意:https://ko.reactjs.org/docs/hooks-overview.html
https://hewonjeong.github.io/deep-dive-how-do-react-hooks-really-work-ko/