どのように、反応はフード(JSX Wise)の下で働きますか?

24309 ワード
react javascript テキストリンク
あなたはどのように反応彼の魔法を行う手がかりなしで毎日JSXを使用していますか?今までなぜ我々は親の中で私たちの要素をラップする必要がありますか?( JSX式は1つの親要素を持たなければなりません.🤯🤯🤯)
さて、この記事はあなたのためです.私がそれを理解したので、あなたにそれを説明するために、最善を尽くします.念頭に置いて、誰も完璧でありません、そして、間違いがあるならば、さえずりの上でそれについて議論するために自由に感じてください、我々は毎日、Dを学びます.

どのように、我々のJSXは働きますか?
まず最初に、JavaScriptを使用してHTMLに新しい要素を挿入する方法を実際に知っていることを確認します.あなたが既にそれを知っているならば、あなたがそうしないならば、スキップするのを自由に感じてください.読み続ける.
通常のHTML/JSウェブサイトでは、次のようにします.
<body>
  <div id="root"></div>
</body>
<script>
  // You first get the targetted element
  const parent = document.getElementById("root");
  // Then you create the new one
  const newChildren = document.createElement("div");
  // And you append it to the parent it belong to
  parent.appendChild(newChildren);
</script>
かなり簡単、右?しかし、あなたはそれが空の要素を作成するということに気がつきました、あなたは多分少なくともいくつかのテキストを加えたいです、そして、IDのような若干の属性さえ.
<body>
  <div id="root"></div>
</body>
<script>
  const parent = document.getElementById("root");
  const newChildren = document.createElement("div");

  newChildren.setAttribute("id", "children");
  newChildren.innerHTML = "Hello World !";

  parent.appendChild(newChildren);
</script>
あなたのHTMLページは現在、' Hello World 'テキストを含む' children 'のIDを使ってdivを作成します.その他の要素を作成したいと思っています(あなたは、あなたを助けるために関数を書くことができますが、それはポイントや記事ではありません).それは本当に速く、右に混乱することができますか?
すべてのリスナーなどを追加するすべての属性を処理する必要があります.

さて、どのように反応するのですか?
反応は、Web開発のために2つのライブラリを使用するために公開されます:反応とreactdom.あなたの反応プロジェクトを作成してから反応プロジェクトを初期化しているとしましょう.最終的に、必要でないものをすべて削除したら、次のようなコードがあります.
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);
今の抽象化を取り除き、JSX構文を削除しましょう.
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';


ReactDOM.render(
    /* Insert your elements here */ ,
    document.getElementById('root')
);
この関数は、あなたの反応アプリのエントリポイントです.あなたは、' root 'のIDでdivを得るために反応している、そして、あなたが最初の引数として通過するすべてをそれの中に提出することです.
今、我々はどのように実際に要素を作成するのですか?この関数は有効な反応要素ではない何かを受け入れません.我々が輸入した生の反応APIでそれに入りましょう.
const element = React.createElement("div", null, "Hello World");

ReactDOM.render(element, document.getElementById("root"));
create element関数は3つの引数をとります:
  • 作成したいHTML要素のタイプ( div , span , input ...)
  • 私が後にjusteを説明する若干の小道具.私たちが
    • を望まないので、今のところ、値はNULLです
  • と、この新しい要素の中に挿入される基本的な何かである子供たちは、つくられました.
    • さて、私たちがこの要素にIDを与えたいなら、どうですか?
    const element = React.createElement("div", { id: "children" }, "Hello World");
    これは2番目の引数が使用される場所です.それはあなたの要素に適用されるプロパティのオブジェクトを受け入れます.ここで、私たちはIDを加えました、しかし、あなたはクラスのためにそれをすることができました、あるいは、あなたのタグのための特定の属性.OnClickイベントでも!
    const element = React.createElement(
  "div",
  {
    id: "children",
    onClick: () => console.log("Hello"),
  },
  "Hello World"
);
    レギュラーJS宣言より良い方法.
    (サイドノートとして、最後のパラメータは必須ではなく、子キーを使って小道具に与えることができます)
    React.createElement("div", { children: "Hello World" });
    私たちはあなたのdivの中にレンダリングする複数の子を持っているか?
    const element = React.createElement("div", {
  id: "children",
  onClick: () => console.log("Hello"),
  children: [
    React.createElement("span", {
      children: "Hello World, ",
      style: { color: "red" },
    }),
    React.createElement("span", {
      children: "this is ",
      style: { color: "green" },
    }),
    React.createElement("span", { children: "Foo Bar !" }),
  ],
});
    Childrenプロパティは、要素の配列を受け入れます、そして、明らかに、あなたが望む限り、あなたはそれをすることができました、そして、これは実際にあなたのJSXコードが実際にどのように見えるかです.
    あなたがこれを読む前に少しのために反応を使用しているならば、あなたは現在、あなたが特定のもの(例えばstyle={{color: 'red'}}))をしている理由のより良い洞察をするべきです、しかし、我々は後でそれに来ます.
    まあ、私はとにかくこれを書いていない、どのようにこれは便利ですか?
    本当に、これは書くのはかなり迷惑です、そして、反応を使用する誰も生のAPIでそれを使用しません.それは、反応がJSXを導入したところです.
    JSXは基本的にはBabelのおかげで上記のコードを書くための砂糖合成です.(もしBabelが何であるかを知らないならば、それはあなたのコードを自由に取り、ブラウザ互換版に変換します.
    ですから、
    const component = () => <div id="children">Hello World !</div>;
    実際にはBabelによってコンパイルされます.
    const component = React.createElement("div", { id: "children" }, "Hello world");
    さて、前の例をJSXの要素リストで書き直したらどうですか?次のようになります.
    const component = () => (
  <div id="children">
    <span style={{ color: "red" }}>Hello World, </span>
    <span style={{ color: "green" }}>this is </span>
    <span>Foo Bar !</span>
  </div>
);
    驚くべき、isntそれ?それは生の反応APIよりクリーンです.
    今まで学んだことを要約しましょう.
  • あなたはJSXコードを書きます.そして、それはBabelによってコンパイルされて、実際に読みやすくなります.
  • は、反応への呼び出しです.createElement ()関数は、正しいパラメータを使用します.
  • そして今何?さて、反応は我々にもう一つのトリックをしています:彼はもう一つの抽象化をしていて、文書をしています.createElement ()関数はUS用です.
    • exempleとして、私は掘っていたと私は擬似コードを書いた.
    var node = document.createElement(type);
Object.keys(props).forEach((propName) => {
  if (propName !== "children") {
    node.setAttribute(propName, props[propName]);
  }
});

children.filter(Boolean).forEach((childElement) => {
  var childNode = mount(childElement);

  node.appendChild(childNode);
});
    私たちは、反応が最初にしたことを正確にして、新しいノードを作成し、必要に応じて属性を設定し、仮想DOMの助けを借りてDOMに追加したことを確認します.
    また、完全な擬似コードhereを見つけることができます.
    here
    雑多な
    私がJSXの中でスタイルのためにオブジェクトを通過している理由?
    インラインスタイルをJSX要素に適用する場合は、オブジェクト内のスタイルをラップする必要があります.なぜ?以下のことは意味をなさないからです.
    const element = React.createElement(
    'div',
    {
        id: 'children',
        onClick: () => console.log('Hello'),
        // Your browser would obviously complain
        style : color : red
    },
    'Hello World');
    正しい?そして、これはあなたがBabelにこれを書くことによってするということです
    <div style={color: 'red'} >Hello World</div>
    そして、それはまた、あなたがあなたのJSXの中でどんな種類の声明も埋め込むことができない理由でもあります.その他.
    どのように、BabelはHTMLタグとカスタム・コンポーネントの違いを理解しますか?
    あなたの構成要素を資本化することによって.以上です.あなたがそれを資本化することなくコンポーネントを作成するならば、Babelは力のHTMLタグとしてそれを理解して、それで、それをつくります.
    <component>My custom component</component>
    我々がそうしないものでない.
    なぜ我々は1つの親に我々の要素をラップする必要がありますか?
    これは、反応APIがどのように動作するかについてです.
    const component = (
    <div>Hello </div>
    <div>World !</div>
);
    Belelはこのようにコンパイルするので、親を持っていると文句を言うでしょう.
    
const element = React.createElement('div',
    {
        id: 'children',
        children: 'Hello World !', 'ae'
    }
);
    再び奇妙な、右?すべてを配列にラップし、この方法を返すことができます.
    const component = [
    <div>Hello </div>
    <div>World !</div>
];
    しかし、これは実際にどのように使用されると仮定されていないので、なぜ親が必要です.
    エンディング
    私たちは今それを包むでしょう、あなたの楽しみを望み、何かを学びました.もう一度、私のフィードバックや間違いを送信すること自由に感じ、私はそれを感謝します!
    あなたは の上でオリジナルの記事を見つけることができます、そして、あなたは私にこの記事について議論するためにここで私にタグを付けることができます.
    良い一日を.
    [Error] Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
    【オリジナル】mysqlタイムスタンプは1970-01-01 00:00:00からじゃない!