生産！ここで我々は行く！

私が開発者として仕事を得たとき、私が欲しかったすべては、働く場所であって、成長する場所でした.それに加えて、私は給料の後ではありませんでした-言うまでもありません-しかし、私は以前に得られた知識を使用して、驚くべきものを構築する環境を望むだけで、自由に働く準備ができていました.私はナイーブ(お金を探していないため)、私は私が欲しいものを持っている、と全体の多くの詳細😉🤭.
先週の金曜日、8月13日は永遠に私の記憶に刻まれます私のチームと私は過去数週間で働いている製品はproduction(prod) . これは、より大きな責任と意思決定の真新しい世界に我々を立ち上げました.

「生産」とは何か

Web開発世界には異なる環境があります.最初はdevelopment : 機能が構築されテストされる環境.そのような特徴が活発な顧客に彼らの使用のために展開される環境は、呼ばれますproduction .
新しい経験を持って挑戦するproduction 残っていない:私たちのアプリはユーザーを持つと、それは新しい機能を展開する前に余分な気遣いを要求するが、ヘイ!私たちは乗車をしている.最後に、私は、ソフトウェア工学に所属する感覚を見つけて、私の主イエスの恵みによって、感謝しています.

先週私の学習旅行

先週、私は私のキットに新しいツールを追加しましたuseEffect() フック.

写真でFerenc Almasi on Unsplash
反応は、コンポーネントのアイデアに基づいて構築され、彼らは時折Hellishすることができますスタイリング.CSSを単に渡すだけでスタイルを整えることはできません.getStream ) または、彼らが上演されている環境で制御するのが難しいスタイルがあります.このような状況はユニークな頭痛、ユニークなソリューションを必要とするものを提示します.
ありがたいことに、反応は強力ですuseEffect() その名前としてフックを使用すると、コードの効果的な変更を行います.それは不適切な使用がブラウザ上のメモリリークを引き起こす可能性があると言われる必要がありますが、ウェブページの原因は、フックを中断する.以下、何を話し合いますかuseEffect() それは何を、どのように使用されます.

1 . useEffect ()は、その名前の通りです。

反応するコンポーネントはprops and state コンポーネントの使用方法に応じてレンダリングします.十分であるが、反応の構成要素は再利用可能であるために建設されます.そのような変更の例としては、JSXで直接説明されていないDOM(Document Object Model)をタップすることが含まれる.この場合、フックが必要である.ステップアップuseEffect() .
どのように成分を反応させるには、非常にトリッキーな主題です、そして、私の推定によって、使用ケースが日によって異なるので、それは完全にそれの掛け金を得るために、生涯を要します.コンポーネントをレンダリングするときに、Responseが停止することができないときには、望ましい効果(または動作)をuseAffect ()フックを使用してそのようなコンポーネントに導入できます.これらの効果は、親コンポーネントとは独立して存在するためにさらに分離でき、そのレンダリング動作は所望のように構成される.

2 .どのように使用されますか。

import { useEffect } from 'react';

useeffect () hookは2つの( 2 )引数を受け入れるために構築されます.useEffect(function, [dependencies(either specific or not)]);actionが画面にコンポーネントをコミットした後に、useeffect ()は最初の引数( function )を実行します.これは論理的に1つのことを意味します.本当のところ、それは悪い経験とともに来ます.そして、それは第2の引数(オプションの依存関係)についてのさらなる説明に私を連れて行きます.
依存関係は任意の依存関係の配列です.彼らはどちらか特定のかどうかは、特定のものをターゲットにすることができますまたは空のままにするオプションです.
以下の異なるケースシナリオを考えます.

症例1

useEffect(() => {
Some DOM manipulation
    });
}

開発者:DOM操作を実行します.
反応:大丈夫、しかし、何回?
開発者:ちょうどコードを実行します.
反応:OK.ブラウザがもはやそれを取ることができなくなるまで、コンポーネントの再レンダリングを引き起こします.そして、メモリリークとページの最終的なクラッシュを引き起こします
なぜこの行動?反応は何度も何度も繰り返して、ページ再レンダリングなしで効果を入れ続けます.

症例2

useEffect(() => {
Some DOM manipulation
    }, []);
}

開発者:DOM操作を実行します.
反応:大丈夫、しかし、何回?
開発者:コンポーネント自体が再レンダリングされたときのみ.
反応:OK.コンポーネントに変更がある場合を除き、一度効果をレンダリングしますコンポーネントserenaderも再レンダリングする原因

症例3

useEffect(() => {
Some DOM manipulation
    }, [xxx]);
}

開発者:DOM操作を実行します.
反応:大丈夫、しかし、何回?
開発者:一度ページロードで、変更の依存を聞いてください.もしあれば、効果を再レンダリングします.
反応:OK.ページの読み込みに影響を与え、変更の依存性をリッスンします.

症例4

useEffect(() => {
Some DOM manipulation
    }, [xxx, yyy]);
}

開発者:DOM操作を実行します.
反応:大丈夫、しかし、何回?
開発者:一度ページロードで、変更の2つの依存関係を聞きます.いずれかのいずれかの場合は、効果を再レンダリングします.
反応:OK.ページの読み込みに影響を与え、変更の両方の依存関係をリッスンします.
この最後の例はまた、洞察を与えるuseEffect() フックは1つ以上の依存関係をとることができます.どのように(依存関係)が構造化されているかは、効果の望ましい出力に依存します.
B :useEffect() 依存関係がレンダリングの間で変更された場合にのみ、最初の引数( function )を実行します.
UseAffect ()フックについてもっと読みたいのですが、これらの2つの投稿をReact useEffect explanation "