フックプロフィールを反応させます

フックを反応させるライフサイクルの状態および反応に機能コンポーネントを使用する方法として。アセンブリステートレス成分(FSC)前関数であるが、しかし、フックがので、これらのコンポーネントは、状態関数を使用することが、発生する反応します。だから今、多くの人々は、機能性成分としてそれらを参照してください。

フック反応組立方法で導入し、ライフサイクル状態管理機能のために。私たちが反応機能コンポーネントは、状態管理とライフサイクル・アプローチを持つことができますしたい場合は、私は機能部品重量に行く必要はありませんクラスコンポーネントを構成するリアクト反応します。反応するフックは、私たちが唯一のコンポーネントの機能を完了することができます使用するアプリケーションを反応させてみましょう。

利点:

再利用する簡単コード
この点は最大の利点は、再利用ロジックすることが困難な場合がクラスコンポーネントを解決するように、カスタム多重状態(各コールの独立したステータスを生成するuseHooks時間)にフックした、フックを反応させなければなりません問題。スキームベース論理コンポーネントと高次成分renderPropsを多重化します。

コードスタイルさわやかな
関数型プログラミングスタイル、機能部品、状態は実行環境に保存された、機能パッケージの各機能を、全体的なスタイルは、よりエレガントより快適です

以下のコード
①値がより便利であり、機能成分の値がスコープ親、クラス構成要素及びアクセスする必要がある。この参考例から直接取得され、その特性小道具状態、多状態または小道具のステップにアクセスします。
②変更状態がより簡単になってきている、this.setState({数:xxxは} ) setCount(XXX)となります。
③簡単未使用状態および機能、コントラストクラスコンポーネント、未使用状態の関数内部コンポーネントおよび機能の検出が容易に検出します

簡単に分割コンポーネント
よりもウィジェットクラスコンポーネントから記述されたコンポーネントの機能を保存するための書き込み機能モジュールには、あなたは、アセンブリに分割する方が喜んでます。

短所:

状態が同期されていません
間違いなく放棄する理由とすることができる、使いにくいのuseEffectのフックを反応させます。操作機能は、各機能は別個のスコープを持つ、とは無関係です。私たちは、複雑なロジックを扱う場合には、多くの場合、問題の状態が同期されていませんが発生します。

コードの副作用がから応答アクティブになる
書込み機能のコンポーネントは、いくつかの文言の習慣を変更する必要があります。あなたは深く二番目の引数useEffect及びこれらのAPIのuseCallbackの役割を理解する必要があります。第二に、以下の点があります。

依存パラメータは①useEffectが良い書き込みではありません、あなたは従属変数が配列に追加されるかを決定するための時間を取る必要があり、幸いeslint-プラグイン・フックが反応し、多くのシナリオは、これを解決するのに役立つが、時々あることを自分自身に頼ることができます判決。
依存性は、それが呼び出されます変更した場合②useEffectはミスを犯すことは非常に容易、それが応答性です。あなたは、古い状態の問題を呼び出すようにするとき、これはそれを維持することが困難であり、直感的ではありません、呼び出すためにそれの時間を理解する必要があります。時には、useEffectはあなたが呼び出しの数を予想以上に発生します。

一般的な問題を回避する方法のフックを反応させます

①ドゥは、あまりにも多くの依存関係がありますuseEffectで書いていない、これらの依存関係は、それが維持する方が良いでしょう、複数のuseEffectに分かれています。
②あなたが同期されていない問題の状態に遭遇した場合は、関数のマニュアルにパラメータを渡すとみなすことができます。以下のような:

   // showCount的count来自父级作用域 
   const [count,setCount] = useState(xxx); 
   function showCount(){ console.log(count) } 
   
   // showCount的count来自参数 
   const [count,setCount] = useState(xxx); 
   function showCount(c){ console.log(c) }

eslint-プラグインに反応-フックプラグインを、そしてそれに警告を添付参加してください。
あなたの参照を保存し、自動的に再レンダリング時に対応するプロパティの参照を更新し、「古い引用」は、この厄介な問題が、風味豊かなハックこのアプローチを避けるためにするために使用useRef。

公開された21元の記事 ウォン称賛51 ビュー5540

おすすめ

転載: blog.csdn.net/liuyifeng0000/article/details/104090344