[TIL]0218 reactihooks学習ing

HOOKS

これはReactの新しい機能であり、クラスを使用することなく、함수 컴포넌트でユーザが状態および他の反応の機能を使用することを可能にする.

関数構成部品では、react stateとライフサイクル機能(ライフサイクル特性)を
を選択します.

class素子では動作xです.
これはclassがない場合にReactが動作できるようにデザインされたスタイルなので!

USStateなどの組み込み型Hookをサポートします.また、「手動」でHookを作成して、構成部品間でステータスロジックを再使用することもできます.

react 16.8に追加された機能.つまりこのバージョンは最初のHookリリースバージョンです

HOOKSの特性

オプション
:既存のコードを書き直す必要はありません.
一部の構成部品ではHookを使用できます.
今Hookが必要でなければ、hookを使う必要はありません.

100%このバージョンと互換性
:Hookは互換性を損なう変化はありません.

現在使用可能
:OKはv 16です.8.0で使用できます.

反応からClassを削除する予定はありません!
今後、Classコンポーネントのサポートを継続します.
=>Hookの漸進的な適用ポリシー.
React開発者が使用するAPIに重点を置く.
まず、私は新しいAPIに投資する時間がないことを知っています.
既存のコードを再包装したくない.
新しいコードで既存のコードと並べてHookを使用する予定です.

Hookは既知のReact概念に取って代わることはありません.
=>Hookはprops、state、context、refs、ライフサイクルなどのReact概念により直感的なAPIを提供しています.
また、Hookはこれらの概念を書くために新しい強力な方法を提供した.

HOOKSの動機

1.reactは、構成部品間でステータスに関連する論理を「再使用」するのは難しい。😥

また、「再利用可能なアクションを構成部品に貼り付ける方法」は提供されません。❌

(ex)部品をショップに接続する)
Before....
以前からreactを使うと、
この問題を解決するために,propsや高次素子のレンダリングなどのモードを熟知しなければならない.
しかし,このモードでは,素子+コードのメンテナンス性↓を再構築する必要がある.
典型的なReactアプリケーションには、ベンダー、消費者、高次構成部品、プレゼンテーションpropsが含まれます.
そして、他の抽象画をめぐる「包装地獄」をよく見かけます.
開発者ツールからフィルタリングできますが、より深い問題に重点を置きます.
したがって,Reactは状態相関論理を共有するためにより良い基礎要素を必要とする.
=>Hook.
(1). 'コンポーネントからステータスに関連する論理を抽象化できます.
-これは「独立したテスト」であってもよいし、「ステータス関連ロジックを階層的に再使用」であってもよい.
そのため、多くの要素の間でHookを共有しやすい.

2.複雑な部品は理解しにくい...

Before....
従来の方法は,メンテナンスが困難な論理的および副作用を有する素子を
維持するので疲れます.
また、各ライフサイクルメソッド(componentDIdMount()、componentDidUpdate())には、頻繁に関連しないイベントハンドラなどの論理が含まれている.
->エラーが発生したり、整合性が損なわれたりする可能性があります.

  위 같은 경우에, 상태관련 로직들이 전역에 있기때문에, 컴포넌트들을 잘게 쪼개는일이
   불가능했다. 그래서 별도의 React 상태관리 라이브러리와 함께 사용하곤 했다.
   근데 얘도 이제 문제가 있다. 너무많은 추상화를 시키고, 컴포넌트 재사용을 더 요구했다한다.
   (나는 사용안해봤지만...)

=>Hook.
(2). ライフサイクルメソッドに基づいて、「論理的に焦点を合わせないでください」
「Hookを利用して論理に基づく関数」が「標準」になります.
... 部品を分けることができます.

Classは人と機械を混同したのか?
Before....
Classは、コードの再利用性とコード構成をさらに困難にします.
Javascriptでは、どのように動作しているかを知る必要があります.
イベントハンドラの登録方法を知らなければなりません.
また,関数素子とクラス素子を区別することも動作する.

=>Hook.
(3). カテゴリなしで反応機能を使用する方法を教えてあげます.
概念的に、React要素は常に関数に近いため、次のような特徴があります.
HOOKは保存します

Today I try...

公式文書のDan AbramovとSophie Alpertは、React Conf 2018で紹介されているHookを使用してアプリケーションを再パッケージする方法を逐句翻訳し、Hookの概要をさらに理解しようと努力する.
1時間も通訳する時間がないので、とても小さいです.でもとても意味があります.

『React Hook』はまだよくわかりませんが.
関数を返すときにメソッドに副作用を渡すと、構成部品を分割するのではなく論理に集中できます.)
コード再利用性と論理簡略化(ex)ライフサイクルメソッドの簡略化例を学習し、ドキュメントを読み、大まかに理解します.(特にサブスクリプション解除の例を見ました)コードをうまく使えば楽になるはずです.