私は次に学ぶことに決めた.数ヶ月前、私は人々がそれについて話して聞いたので、いくつかの前に、しかし、ほとんど私は新しいものを学び、私の知識を向上させたかったからです.それで、私は次に開きました.JSドキュメントとそのコンセプトを読む.私は、私が私が新しい次をつくったその特徴にとても感動しました.JSプロジェクトとすぐにコーディングを開始.私はすでにそれを実装するのに最適な時間だったアイデアを持っていた.あなたが練習するときだけ遭遇するものがあります、そして、あなたはそれらのもの自身からだけでなく、関連するものから多くを学ぶでしょう.そして、私が私の次をしている間、私が学んだものは、ここにあります.プロジェクト.

再水和物はレンダリングのように動作しません

サーバー側レンダリングの世界に初期の時点で、私のために、すべてがクライアント側のレンダリングとはあまり異なりませんでした.インターネット上のリソースを見つけるとき、私は“再水和”という用語に遭遇したが、その時、私はそれについてあまり気にしなかった.私は、それがレンダリングと同じであると思いました.予期せぬ出来事が起こるまで.

const Component = () => {
  const data = useLocalStorage("saved");

  return data ?
    <Text>Data is: {data}</Text> :
    <Alert>There is no data</Alert>;
};

このコンポーネントは、localstorage またはデータが空または存在しない場合は警告を表示します.useLocalStorage フックがアクセスするlocalstorage キーが見つからなかった場合は、渡されたキーの値を返しますlocalstorage がアクセスできない場合、undefined .
だってlocalstorage サーバー上では利用できません.Alert その後、クライアントに完全に形成されたHTMLを送信します.HTMLは、クライアントがそれを受け取るとすぐに画面上に表示されます.しかし、このHTMLは完全に対話的ではありません、それはそれにイベントハンドラをレンダリングして、付けるのに反応する必要があります.この過程を再水和物と呼ぶ.localstorage 今すぐクライアントによってアクセスすることができますlocalstorage キーを含むsaved を返します.So Component はText の代わりにAlert .
問題はこのコンポーネントが規則を破っていることです.開発環境では、反応はこの行動について警告します.

反応が再水和を実行するとき、それはサーバーから送られるDOMを再利用するでしょう.再水和プロセスは高速になるように最適化されており、DOM構造が変化しないと仮定しているので、「スポットの違い」の仕事は起こりません.
時々、反応は非常によくこの行動を扱うことができますが、いくつかのケースでは、これはコンポーネントが不要な場所でレンダリングされるようなバグにつながります.あなたが意図的にサーバーとクライアントで異なるものをレンダリングしたいならば、解決は2パスレンダリングと呼ばれています.

2パスレンダリング

2パスレンダリングでは、クライアントとサーバは同じDOMをレンダリングします.再水和プロセスの後、クライアントは違いをレンダリングし始めます.

const Component = () => {
  const data = useLocalStorage("saved");
  const [isClient, setIsClient] = useState(false);


  if (isClient)
    return data ?
      <Text>Data is: {data}</Text> :
      <Alert>There is no data</Alert>;
  else return <Loading />;
};

ご覧のように、サーバーとクライアントの両方がレンダリングされますLoading だってisClient 同じであるfalse つの環境で値.クライアントとサーバは現在、同じDOM構造を使用しているので、どのようにしてlocalstorage データ?
あなたはおそらく知っているuseEffect クライアントにのみ発生するので、localstorage データを設定できますisClient あるtrue インuseEffect .

useEffect(() => setIsClient(true), []);

我々は最初のレンダリングで一度だけこのランを望みます.反応は、更新を認識し、再レンダリングを実行します.このソリューションの欠点は、アプリケーションが完全に双方向の前にUIを2回レンダリングする必要があります.しかし、ほとんどの場合、これは大きな取引ではありません.

コンポーネントライブラリはそんなに悪くない

過去に、反応ブートストラップ、マテリアルUIまたはAntデザインのようなコンポーネントライブラリで動作するとき、私は不便な小さな箱に入れられたように感じました.私は、私が彼らの規則に従わなければならなくて、私の創造性が投獄されたと思いました.そのために、私は私の学校プロジェクトのほとんどのためにスクラッチからUIを設計しました.そしてもちろん、品質はちょうど受け入れられる.学校のプロジェクトが、私はそれを喜んだ.正直言って、自分でUIを構築することは、CSSとUIデザインについて多くのことを教えてくれました.

Spend days writing CSS for the UI of my school project

うーん、私はそれを私はすべてのUIを完了するためにかかったので、私はこのプロジェクトで自分ですべてのCSSを記述する必要はありません、私はコンポーネントライブラリを別のショットを与えたい.
私は過去にそれらとの悪い経験があったので、材料とブートストラップを避け、私も新しいものを試してみたい.ガイストUI私の最初の選択です.シンプルでデザインが好きです.しかし、私はそれが私のプロジェクト要件を満たしていないことに気づいた.私はまだ私のプロジェクトに合うようにたくさん書く必要があります.
一度、私はRedditサーフィンしていた、私は2009年にポストを見つけたr/reactjs コンポーネントライブラリの新しいリリースを発表する.偶然、私は当時、新しいコンポーネントライブラリを探していたので、なぜそれを見ていない.

それは私の期待を超えていた.デザインはモダンで美しい.多くの事前に構築されたコンポーネントが、冗長ではなく、あなたのニーズを満たすことができる便利なフックがあります.各コンポーネントは、各コンポーネントの部品のスタイリングをサポートするスタイルAPIを持って、これは高度にカスタマイズ可能なすべてのmantineコンポーネントになります.マンチンはいくつかの拡張機能を提供していますモダルズマネージャ、通知システム、リッチテキストエディタ、…!だから、自分の時間を費やす必要はありません.私はマンチンと一緒に仕事をするときに、すべてのことはとても滑らかな経験があります.正直、これは私の最も好きなコンポーネントライブラリです.

フォームのパフォーマンスを高めるためにFormDataを使用します

私がインターネット上でチュートリアルを見るとき、それが使うならばform or input , 非常にチャンスを制御コンポーネントとして使用されますinput それ自身の状態があります.

const Form = () => {
  const [name, setName] = useState("");
  const [address, setAddress] = useState("");

  const submit = (e) => {
    e.preventDefault();
    console.log(`${name} lives at ${address}.`);
  };

  return <form onSubmit={submit}>
    <input
      placeholder="Input name..."
      value={name}
      onChange={(e) => setName(e.currentTarget.value)} />
    <input 
      placeholder="Input address..."
      value={address}
      onChange={(e) => setAddress(e.currentTarget.value)} />
    <input type="submit" />
  </form>;
};

これらのどちらかに1文字を入力すると、この欠点がありますinput , それは全体を作るForm 再表示するそれは小さくて簡単な形の問題ではありません.しかし、あなたが大きくて複雑な形、特にダイナミックな入力でフォームを持っているならば、あなたは遅れに気がつきます.これは、画面に入力の更新値を反映するために少し長くかかります.もう一つの欠点は、あなたのフォームの各入力の状態の束を作成する必要がありますが、これはuseReducer フック.
あなたのフォームが基本的にユーザーデータを集めるならば、JavaScriptは強力なビルトインを持ちますFormData それらを取り除くのに役立つインターフェースuseState .

const Form = () => {
  const submit = (e) => {
    e.preventDefault();
    const fd = new FormData(e.currentTarget);
    console.log(`${fd.name} lives at ${fd.address}.`);
  };

  return <form onSubmit={submit}>
    <input placeholder="Input name..." name="name" />
    <input placeholder="Input address..." name="address" />
    <input type="submit" />
  </form>;
};

いいえ、再レンダリングはありません.心配しないで、あなたの入力データはまだ表示され、更新されますinput . フォームは現在制御されません.

入力は必ずしもフォームの中には存在しない

フォーム内のすべてのものは、明らかに、そのフォームに属しています.それでFormData Constructorは、フォームがどのフィールドを持っているかを知っています、そして、Submitボタンはそれがどのフォームにイベントを送るかについてわかっています.
しかし、いくつかのケースでは、入力はフォームの中にはできません.ある属性があるform これは、入力がどのフォームに属しているかを指定します.

<form id="user-form" onSubmit={submit}>
  <input placeholder="Input name..." name="name" />
  <input placeholder="Input address..." name="address" />
</form>
<input
  placeholder="Input password..."
  name="password"
  type="password"
  form="user-form" />
<input type="submit" form="user-form" />

この属性を使用すると、入力を任意の場所に置くことができます.

結論

まだこのプロジェクトをしているときに私が学んだ多くの新しいことがあります、しかし、多分、私はもう一つのポストで共有します.私にとって、練習は発見し、新しいレッスンを学ぶ最良の方法です.あなたはそれを掘り下げ、プログラミングの世界が拡大し続けるでしょう.
それで、全体のポストは、私の最初の次について言及します.JSプロジェクト、それは何ですか?あなたに紹介KEYREVEAL , プレゼントを共有して楽しむ場所.

何が新しいのですか。

FacebookやRedditのようなソーシャルメディアのプレゼントに参加したことがありますか?製品キーの束は公に共有され、誰もがそれらを楽しむことができます.あなたは興奮して1つのキーを選択し、それをアクティブにします.しかし、それはキーが主張されたことを伝えます.もう一つ試してみましょう.同じ結果が発生します.次に、どのキーがアクティブになっているかを知るコメントを見ます.あなたは、すべてのキーは誰かによって主張されると言うような人々を除いて何も見つける.それらの人々はちょうどキーをつかんで、どんなメッセージなしででも去りました.それは本当にイライラです!
キーエンドを使用すると、すべてのキーがなくなっている実現するためにすべてのキーを試して時間を無駄にする必要はありませんので、キーの状態を追跡することができます!

トライKEYREVEAL さあ.

またはGitHub repository