フックとフックのタイプを反応させます
3508 ワード
何が反応フックですか?フックは、反応16.8バージョンで新機能を紹介します. それは、クラスを書くことなく状態と他の反応特徴を使うのを許します.フックは、「機能」から「機能」と「ライフサイクル」機能を「フック」する機能です. クラス内で動作しません. フックは、常に反応関数の最上位レベルで使用されるべきです. ノードバージョン6以上.NPMバージョン5.2以上
以前は、機能コンポーネントを書いて、いくつかの状態を適用する必要があることに注意してください.
しかし、新しい更新プログラムを使用すると、機能コンポーネント内のフックを使用すると、リファクタリングプロシージャを簡単にすることができます.
また、以下のような反応フックを使用する利点がたくさんあります.
コードの既存の部分を再利用するより多くの柔軟性. が複雑になるとき、機能部品をクラス構成要素に再評価する必要はありません. あなたは全くこれについて心配する必要はありません. メソッドに対するこれ以上の束縛 フックを使ってロジックとUIを区別するのは簡単です. フックは、反応関数コンポーネント内でのみ呼び出すことができます. フックはコンポーネントのトップレベルでのみ呼び出すことができます. フックは条件にならない. フックは、反応クラス構成要素 で働きません
我々は、組み込みフックのAPIを説明します.ビルトインフックには10があります.クラスベースのコンポーネントに対して同様の機能を実現します.
フックは2つの部分に分けることができます.
基本フック 追加フック
USENTは初期化状態を受け入れる関数コンポーネントUSENTです.現在の状態 状態を更新する関数.
、第1の値カラーは、現在の状態 である 2番目の値setcolorは、状態を更新するために使用される関数です. 更新状態
状態値を更新するときは、状態更新関数を使用します.
有効なフックを使用すると、コンポーネントに副作用を実行できます.データの取得と同様に、DOMとTIMERS
毎秒変更
“useContext”フックは、各階層に手動で小道具を渡すことなく、コンポーネント階層全体にアクセスできる一般的なデータを作成するために使用されます.コンテキスト定義は、小道具を含まずにすべての子要素に利用可能になります.
function Example(props) {
// Hooks can be used here
return <div />;
}
なぜ我々は反応フックが必要ですか?
以前は、機能コンポーネントを書いて、いくつかの状態を適用する必要があることに注意してください.
しかし、新しい更新プログラムを使用すると、機能コンポーネント内のフックを使用すると、リファクタリングプロシージャを簡単にすることができます.
また、以下のような反応フックを使用する利点がたくさんあります.
反応フックの長所
フックルール
フックの種類
我々は、組み込みフックのAPIを説明します.ビルトインフックには10があります.クラスベースのコンポーネントに対して同様の機能を実現します.
フックは2つの部分に分けることができます.
基本フック
useState
useContext
useEffect
useCallback
useReducer
useLayoutEffect
useMemo
useRef
useDebugvalue
useImperativeHandle
米国不動産
USENTは初期化状態を受け入れる関数コンポーネントUSENTです.
状態値を更新するときは、状態更新関数を使用します.
効果
有効なフックを使用すると、コンポーネントに副作用を実行できます.データの取得と同様に、DOMとTIMERS
useEffect(<function>,<dependency>)
UseEffect 2つの引数を受け入れます.番目はオプションです毎秒変更
テキスト
“useContext”フックは、各階層に手動で小道具を渡すことなく、コンポーネント階層全体にアクセスできる一般的なデータを作成するために使用されます.コンテキスト定義は、小道具を含まずにすべての子要素に利用可能になります.
import { useState } from "react";
import ReactDOM from "react-dom";
function Component1() {
const [data, setdata] = useState("data");
return (
<>
<h1>{`Hello ${data}!`}</h1>
<Component2 data={data} />
</>
);
}
function Component2({ data }) {
return (
<>
<h1>Component 2</h1>
<Component3 data={data} />
</>
);
}
function Component3({ data }) {
return (
<>
<h1>Component 3</h1>
<Component4 data={data} />
</>
);
}
function Component4({ data }) {
return (
<>
<h1>Component 4</h1>
<Component5 data={data} />
</>
);
}
function Component5({ data }) {
return (
<>
<h1>Component 5</h1>
<h2>{`the ${data} is here!`}</h2>
</>
);
}
export default Component1;
Reference
この問題について(フックとフックのタイプを反応させます), 我々は、より多くの情報をここで見つけました https://dev.to/swetasingh03/react-hooks-and-types-of-hooks-holテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol