TIL 22. Hooks

✔️ hooks

hooksと言えば混同とはどういう意味なのでしょうが、hooksにはusState、useEffect、useRef、useReducerの4種類がありますが、今一番使われているのはuseStateとuseffect!
初めてreactを使うときはclassを使いますstateを使用していますが
次に、関数を書くのがもっと便利で、具体的に使わないのはとてもいいです.
Hooksは授業中に仕事をしない!
hooksは2018年に発売された最新の反応スタックです
私がずっとclassを書いているのはstateとlifecycleのためです.
フックが出てくることから、管理が容易になります.

https://reactjs.org/docs/hooks-intro.html

🙋🏻Hooksを使う前に知っておく必要があります!

1.一番上からHookを呼ぶしかない!

繰り返し文、条件文、ネスト関数でHookを無効にする

2.react関数構成部品 でのみHookを呼び出す

useState

const [data, setData] = useState();

ステータス値とその更新値を保持する関数を返します.最初のレンダリング中に返されるdataは、最初の伝達パラメータ(initialState)の値と同じである.setData  関数はstateを更新するために使用されます.新しいstate値を受信し、キューにシンボルツリーレンダリングを登録します.

useEffect

Effect Hook(useEffect)は、これらの副作用を関数要素で実行することを可能にする.その目的はReactクラスのcomponentDidMountまたはcomponentDidUpdateおよびcomponentWillUnmountと同じであるが、それらは1つのAPIに統合されている.

  useEffect(() => {
    fetch(`${RESULT_DATA}`)
      .then((res) => res.json())
      .then((res) => {
        setContent(res.data.content);
        setPercent(res.data.percent);
      });
  }, []);

Custom Hook

ユーザーステータス、ユーザー効果など、さまざまな内蔵Hookの組み合わせにより、重複論理を分離して顧客Hookを作成できます.次のコード例では、usState FAQのコードの一部を個別のHookに分割します.

function Box() {
  const position = useWindowPosition();
  const [size, setSize] = useState({ width: 100, height: 100 });
  // ...
}

function useWindowPosition() {
  const [position, setPosition] = useState({ left: 0, top: 0 });
  useEffect(() => {
    // ...
  }, []);
  return position;
}