正式なドキュメントをもう一度読む-一度読む

jsx

JSXはJavaScriptの拡張構文です.JSXはテンプレート言語と似ているように見えますが、JavaScriptのすべての強力な機能を提供しています.JSXはreactです.createElement()を呼び出して通常のJavaScriptオブジェクト「react element」(react element)にコンパイルします.ここでJSXのデフォルトの説明を表示するか、JSXの詳細なチュートリアルを表示することができます.
REACT DOMはHTML属性名ではなくCAMEL CASEを命名規則として使用する.たとえば、JSXではtabindexはtabIndexで作成されます.classerツリービューはJavaScriptの保存言語であるためclassNameを使用して作成されます.

min.js

デフォルトでは、JavaScriptのコード容量を減らすためにmin.jsに圧縮されます.
コードのインデントまたはスペースを削除し、1行に圧縮

コンパイラ

JavaScriptコンパイラは、JavaScriptコードを変換し、JavaScriptコードを異なる形式で返します.通常、ES 6構文は、古いブラウザでも使用できるように変換するために使用される.BarelはReactとともに最も広く使われているコンパイラです.

すべすべした

ユーザが要求すると、サーバはWebアプリケーションを構成するファイルを送信します.Webアプリケーションを構成するファイルの数が多いと、ユーザの要求に応答する時間が長くなります.
サーバがファイルを要求して応答するのに1秒かかるとします.この場合、100個のファイルには100秒の応答時間が必要であり、1000個のファイルには1000秒の応答時間が必要である.
多くのユーザーがWebサイトを使用している場合、ネットワークのボトルネックが発生し、タイムリーに応答できない可能性があります.
すべての変数と関数を1つのJSファイルに追加してファイル数を減らすと、ネットワークのボトルネックを回避するためにより高速になります.しかし,開発者にとっては,何千行ものコードを維持する必要があるため,可読性の面で地獄はない.
ファイルを可読性と保守性に分割すると、ネットワークのボトルネックになり、ファイル数を減らして応答時間を得ると、可読性とメンテナンスが困難になります.では、2匹のウサギを捕まえる方法はありますか?
これらの問題を解決するために、「バンドルパッケージ」(Bundler)が発生しました.簡単に言えば、バンドルパッケージは、複数のファイルを1つのファイルに組み合わせることができる.典型的なバンドルパッケージには、webpack、package、browserifyがあります.主に使っているwebpackを中心にご紹介します.
ツールチェーン=CRA

レンダーエフェクト(Render Effects)

エレベーターはreactアプリケーションの最小単位です.

DOMでエンティティをレンダリングする

<div id="root"></div>

すべてのエンティティはReact DOMによって管理されるため、「ルート」DOMノードと呼ばれます.
reactセグメントをルートDOMノードにレンダリングするには、reactDOMも使用します.render()に送信すればいいです.

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));

レンダリングされたエンティティの更新

Reactエイリアスは不変のオブジェクトです.エンティティを作成した後、そのエンティティのサブアイテムまたは属性は変更できません.ムービーでは、エンティティはフレームのような特定の時点のUIを表示します.
これまでの説明によれば、UIを更新する唯一の方法は、新しいエンティティを作成し、ReactDOMに変更することである.render()で渡す.

変更された部分のみ更新

REACT DOMは、必要に応じてのみDOMを更新し、そのサブアイテムを以前のエンティティと比較する.

レンダー構成部品

反応セグメントは、ユーザ定義の要素で表すこともできる.

const element = <Welcome name="Sara" />;

Reactによって作成されたユーザ定義要素としてのエンティティが見つかった場合、JSXはそのサブアイテムを単一のオブジェクトとして要素に渡します.このオブジェクトをpropsと呼びます.
次に、ページで「Hello,Sara」をレンダリングする例を示します.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

この例では、次のことが起こります.

<Welcome name="Sara" />エリメントReactDOM.render()を呼び出します.

Reactは、{name: 'Sara'}をpropsとしてWelcome要素を呼び出す.

結果として、Welcome 要素は<h1>Hello, Sara</h1>エリーを返す.

REACT DOMは、<h1>Hello, Sara</h1>エリーに適合するようにDOMを効率的に更新することができる.

シンボルをレンダリングするたびに関数が呼び出されるのはなぜですか?

関数が構成部品に渡されたときに呼び出されないことを確認します.

render() {
  // 잘못된 방법: handleClick은 레퍼런스로 전달되지 않고 호출되었습니다!
  return <button onClick={this.handleClick()}>Click Me</button>
}

伝達関数自体は上記の方法ではなく、括弧を使用します.

render() {
  // 올바른 방법 : handleClick이 레퍼런스로 전달되었습니다.
  return <button onClick={this.handleClick}>Click Me</button>
}

createPortalを使用したモードの作成

createPortal部分を見て模型を作りました

再調整

悪いやり方

{this.state.list.map((todo, index) => (
  <ToDo key={index} {...todo} />
))}

indexに置くと性能が悪い.インデックスをキーとして使用するときに配列を再配置すると、構成部品の状態に関連する問題が発生する可能性があります.構成部品インスタンスは、鍵に基づいて更新および再利用されます.キーとしてインデックスを使用すると、アイテムが並べ替えられたときにキーも変更されます.したがって、構成部品の状態が悪化したり、予期せぬ事態になる可能性があります.
たとえば、

<ul>
  <li key="0">Duke</li>
  <li key="1">Villanova</li>
</ul>
---------------- li 엘리먼트 하나를 맨 앞에 추가했을 때
<ul>
  <li key="0">Connecticut</li>
  <li key="1">Duke</li>
  <li key="2">Villanova</li>
</ul>

既存のインデックスは次々と変更されるため、比較アルゴリズムによりプロジェクトの再ソートと非効率な操作が行われます.

{this.state.list.map((todo, index) => (
  <ToDo key={Math.random().toString(10).substr(2,13)} {...todo} />
))}

keyは不変で、予測可能で、唯一でなければならない.例えば、Math.random()によって生成された値などのトランスキーは、多数の構成部品インスタンスとDOMノードの不必要な再生をもたらし、パフォーマンスの低下やサブ構成部品の状態の損失を引き起こす可能性があります.

よい方法

{this.state.list.map((todo, index) => (
  <ToDo key={todo.id} {...todo} />
))}

固有のidですが、予想できるidを付与して…!