ソースフックを反応させます

フックの下に予備的な理解をしてみましょう、とuseState useEffectの使用。

/ * * 
 *必须要和反応反応-DOM以上16.7 
 * / 
インポートから、{useState、useEffect}リアクト '反応' 
エクスポートデフォルト（）=> { 
  CONST [名前のsetName] = useState（ 'zhangsan' ）
   リターン（
     < > 
      <P>私の名前である：{名前} </ P> 
      の<input type = "text"の値= {名前}のonChange = {E =>のsetName（e.target.value）} /> 
    </>   ）
}

これは非常に、非常に簡単なデモで、フックを使用して最初の、あなたが反応しなければならないと反応し、DOM 16.7を超えます。ここでは、どのような彼が欠けているが不足している、以前のクラスコンポーネントとは対照的に、機能コンポーネントを宣言し、このオブジェクトです。彼は、自身が第二が含まれている機能は、彼は我々はフックを使用していくつかの機能の最も明白であるライフサイクル・アプローチを、持っていないことができた何this.state、ない状態が存在しない、このテーマませんでした状態を保存します

CONST [名前、のsetName] = useState（ 'zhangsan'）

ここではデフォルトを渡し、useStateを使用してから、彼は、私たちは、これが第二項に該当する状態変数の私たちの最初の配列は、その我々はすべて知っている解体の配列ですされなければならないされた配列を返しますこの段階ではメソッドを変更します。これは、一つだけのuseStateによって私たちに返されます。その後、我々はこの状態を使用して、我々は、レンダリングする段階を変更することができるようになります。このようにOnChangeは、この状態を変更することです。

機能コンポーネントへのフックがクラスコンポーネントを提供する能力を持っています。クラスコンポーネントを交換するだけでなく、彼の重要性は、彼の意味は、内部コンポーネントのロジックの一部を分割するために私たちを支援することです。抽出された彼は、より多くのコンポーネントを多重化することができます。このロジックの一部を分割することは困難である以前にクラスコンポーネント。

useEffect（（）=> { 
    にconsole.log（ 'コンポーネントの更新' ）

    リターン（）=> { 
        にconsole.log（ 'アンバインド' ）
    } 
}、[]）

私たちは、ライフサイクル・アプローチ、コンポーネントのレンダリングを使用する場合、我々はいくつかの操作をしたい、我々はuseEffectにフックを使用することができます。このことは、メソッドを渡すことができ、搭載され、更新されたフックの区別には焦点がありません。useEffectが呼ばれるようにそこに行くされるたびに更新されます。我々はn番目のは、このイベントを削除するように更新方法を結合このイベント、内部で行う場合は、それを行う方法を、これはアンバインド返させる方法です。ここでは最初にアンバインド実行されます。次に、コンポーネントの更新を行います。これは、各アップデートは条件が削除される前に置き、その後、新しい状態に復帰されようとしている、より論理的なアップデートです。

ここで一度エグゼクティブOKを代表して、空の配列を渡します。この使用法は、ライフサイクル・アプローチフックシミュレーションを使用することです。私たちは、React.js内部useState源を見つけます

機能resolveDispatcher（）{ 
  CONSTディスパッチャ = ReactCurrentOwner.currentDispatcher。
  不変（
    ディスパッチャ！== nullでは、
    「フックが唯一の機能部品の本体内に呼び出すことができます。」、
  ）; 
  返すディスパッチャ; 
} 

エクスポート機能 useState <S>（初期状態：（（）=> S）| S）{ 
  CONSTディスパッチャ = resolveDispatcher（）。
  リターンdispatcher.useState（初期状態）。
}

私たちは、戻り値がuseState dispatcher.useStateで、ディスパッチャ内useStateを参照してください。ディスパッチャ）は（resolveDispatcherと呼ばれている。この方法でresolveDispatcherこのディスパッチャ内部参照ReactCurrentOwner.currentDispatcherすることによって得られます。それはこれらの事を割り当てますレンダリングに来るとき、これはフォローアップです。そのため、任意のノードを取得していない段階を使用して反応させます。createElementの入ってくるオブジェクトが、実際にレンダリングしないときは、本当にこのインスタンスを作成していません。ReactCurrentOwnerは、グローバルクラスであります

CONST ReactCurrentOwner = {
   / * * 
   * @internal 
   * @type {ReactComponent} 
   * / 
  電流：（ヌル：nullの | 繊維）、
  currentDispatcher：（ヌル：nullの | ディスパッチャ）
}。

これは、非常に単純なReactCurrentOwnerのソースコード、グローバルオブジェクトです。二つの特性がありますが、一つは現在のレンダリングノードである現在、強さです。currentDispatcherは、ディスパッチャに対応する強さです。useEffect同様のuseState。

ソースフックを反応させます

おすすめ