先端コンポーネント化開発の考え方
4154 ワード
一、なぜコンポーネント化が必要なのか
Reactを使う前に、私は何がコンポーネントなのか分かりませんでした.私はフロントエンドのポストに移った後、直接Reactを使って可視化されたデータの大きな画面を作りました.その時、コンポーネントとは何なのか、Reactが何なのか分かりませんでした.アヒルを追い払って棚に上がり、頭の皮を硬くして、その困難さは想像できます.私がフロントエンドの訓練キャンプに参加する前に、コンポーネントの概念もVueやReactの中でexportが出てきたものにとどまっているだけで、コンポーネントと呼ばれています.
以前はウェブサイトを開発し、フロントエンドページはバックエンドから生成され、jQueryやbootstrapに合わせてウェブサイトが開発されたが、ライブラリの使用については、以前はローカルにダウンロードして使用を導入していたが、その後、ライブラリの使い勝手を解決するためにbowerが現れ、ライブラリの依存問題を解決するために、使用をもう少し便利にすると、モジュール化の思想が現れ、モジュール化もコンポーネント化にもっと便利な使用方法を提供した.
また、なぜコンポーネント化開発が必要なのかというと、以前は基本的に各ページにjsロジックがあり、コピーして貼り付けて変更する論理が少なく、特に公用でない限りグローバルに導入されていたが、今から見れば刀耕火種の時代であり、開発効率は今に及ばない.例えば、輪番図を書いたり、デザイン原稿を見たり、手元の輪番庫を見たりして、自分で書いたほうがいいと思います.完全にデザイン原稿に基づいてカスタマイズされているので、他の人が持って行っても使いにくいです.それから、豊富な配置項目の輪番庫がだんだんできました.これがコンポーネント化の始まりで、人々がこれに対して需要があることを示しています.
二、コンポーネント化はどんな問題を解決するために用いられるか
まず、現在のコンポーネント化がどのようなものを持っているのか、どのようなメリットをもたらしているのかを見てみましょう.
vueとreactのコンポーネントから見ると、1つのコンポーネントは少なくとも以下のものを持っています.property、attribute、ページにレンダリングする方法、ライフサイクル、内部の状態などです.
その中でpropertyとattributeはコンポーネントが外部とコミュニケーションし、インタラクティブになる橋渡しであり、vueとreactはこの点での思想が一致しており、少なくとも使用上は同じような感じがします.
ページをレンダリングする方法もほとんど同じです.vueはReactより一歩多く、自分のものを使っているからです.vue形式のファイルは、vue-template-compilerでこのファイルを関数にコンパイルします.この関数にはrender関数があります.reactと同じです.
ライフサイクルを見ると、ほとんどのbeforeCreate、created、mounted、destroyedの方法があり、コンポーネントが指定された段階で一定の制御性を持つことを目的としています.
また、内部状態です.vueは関数を使用してオブジェクトを返します.reactはthisを直接使用して内部状態を定義します.その本質もあまり違いません.
ここまで来ると少し名堂が見えますが、vueでもreactでも、内部で実現されているものは多くないようです.さらに抽象的に,以上の機能を実現した関数であれば,一定の体系的,生きた,機能的に完備したコンポーネントであると考えられる.このような条件に達してこそ,定義されたコンポーネントが便利に運用され多重化されるからである.
上のようなコンポーネントに対する抽象的な考えを生んだのは、winterが私たちに2つの線を話して授業が終わった後でやっと分かったからです.
また,コンポーネント化されていない開発と比較すると,我々はこれらのものを備えておらず,実際に開発した場合でもこれらの考えは生じず,書かれたものはパッケージ性,体系性,多重性に劣っている.
最後に、私の理解に基づいてコンポーネントに次の定義を与えます.コンポーネントは、属性、方法、継承関係だけでなく、state(内部状態)、attribute(特性)、lifecycle(ライフサイクル)、UI、インタラクティブロジックを含むオブジェクトとして理解できます.偏向運転時の機能ユニットで、複雑な制御を持っています.一般的な意味でのオブジェクトよりも多くのものが見られますが、これだけのものが多いからこそ、コンポーネントと呼ばれています.
三、コンポーネント化の実現方法
私たちは白黒棋を書く練習のプログラミング能力を書く時、まず少しの機能を実現して、それから最適化して、いくつかの機能の独立した論理を関数でカプセル化して、書き終わった後、またclassを使って1つの完全な機能のカプセル化を行って、実はこれは1つのコンポーネントと見なすことができて、それも自分のUIと内部のインタラクティブな論理があるためです.
これはコンポーネントを書くだけで、コンポーネント化を具体的に実現するにはもっと多くのことを考える必要があります.たとえば、コンポーネントメカニズムはどのようなものですか?
コンポーネントメカニズムはコンポーネント化を実現する礎であり、あなたのコンポーネントが将来どのように成長するか、どのように使うか、使いにくいかを決定します.
一般的に、コンポーネントメカニズムにはコンポーネントの作成とマウントがどのように行われているのか、1つのコンポーネントがどのように作成されるかには様々な方法があり、vueとreactの差が大きく、コンポーネントをマウントするタイミングがあり、コンポーネントをレンダリングすることができます.
2つ目は、コンポーネントのライフサイクルがどのように定義されているか、何個定義するか、最も基本的なライフサイクルは3つあります.すなわち、作成、マウント、アンロードです.コンポーネントをより制御できるように、vueのように多くのライフサイクルを定義することができます.createの前にbeforeCreateがあり、コンポーネントの制御細粒度を細かくすることができます.
3つ目はイベントで、ここでのイベントは主にコンポーネントが外部と通信できるメカニズムであり、vueは$emitメソッドを定義し、reactが直接属性を使用する方法を定義しているが、vueの属性も関数を伝達することができ、イベント通信としても使用することができる.
4つ目はattributeとpropertyです.この2つの単語は特性と属性として理解できます.attributeは記述性を強調し、文字列しかありません.例えばimgラベルのsrc、aラベルのhrefなどはattributeの範疇に属しています.propertyは従属関係を強調しています.例えば、ある属性はあるコンポーネントにのみ属しています.このコンポーネントにこの属性を定義しました.では、属性値は内部のjsでしか設定できません.
5つ目はchildrenです.childrenはコンポーネントの中で非常に重要なメカニズムです.コンポーネントサポートがサポートされていないことと、どのようにレンダリングを追加するかを考慮する必要があります.winterがコンポーネント化を説明するときも、childrenを追加するために自分で書く方法です.ここではコードセグメントを示します.
6つ目は、あなたのコンポーネントをどのように記述するかです.現在よく見られるのはhtmlラベルをカスタマイズする方法で記述されています.vueとreactはこの点でも一致しており、JSX構文をサポートしています.vueは単一ファイルコンポーネントというより友好的な方法をサポートしています.
コンポーネントメカニズムの考慮を完了し、次に自分のコンポーネントシステムを構築する必要はありませんが、自分のコンポーネント化システムを構築すれば、ページを開発する際に半分の効果を達成することができます.
最も基本的なコンポーネントシステムにはlayout、input、form、table、messageなどが含まれています.これらのものはあなたの後続の開発プロセス全体を支えることができます.現在、私たちは開発時にelement-ui、antdなどのUIフレームワークを多少使用しています.彼らはそれぞれコンポーネントシステムを持っていて、ほぼ一致しています.
Reactを使う前に、私は何がコンポーネントなのか分かりませんでした.私はフロントエンドのポストに移った後、直接Reactを使って可視化されたデータの大きな画面を作りました.その時、コンポーネントとは何なのか、Reactが何なのか分かりませんでした.アヒルを追い払って棚に上がり、頭の皮を硬くして、その困難さは想像できます.私がフロントエンドの訓練キャンプに参加する前に、コンポーネントの概念もVueやReactの中でexportが出てきたものにとどまっているだけで、コンポーネントと呼ばれています.
以前はウェブサイトを開発し、フロントエンドページはバックエンドから生成され、jQueryやbootstrapに合わせてウェブサイトが開発されたが、ライブラリの使用については、以前はローカルにダウンロードして使用を導入していたが、その後、ライブラリの使い勝手を解決するためにbowerが現れ、ライブラリの依存問題を解決するために、使用をもう少し便利にすると、モジュール化の思想が現れ、モジュール化もコンポーネント化にもっと便利な使用方法を提供した.
また、なぜコンポーネント化開発が必要なのかというと、以前は基本的に各ページにjsロジックがあり、コピーして貼り付けて変更する論理が少なく、特に公用でない限りグローバルに導入されていたが、今から見れば刀耕火種の時代であり、開発効率は今に及ばない.例えば、輪番図を書いたり、デザイン原稿を見たり、手元の輪番庫を見たりして、自分で書いたほうがいいと思います.完全にデザイン原稿に基づいてカスタマイズされているので、他の人が持って行っても使いにくいです.それから、豊富な配置項目の輪番庫がだんだんできました.これがコンポーネント化の始まりで、人々がこれに対して需要があることを示しています.
二、コンポーネント化はどんな問題を解決するために用いられるか
まず、現在のコンポーネント化がどのようなものを持っているのか、どのようなメリットをもたらしているのかを見てみましょう.
vueとreactのコンポーネントから見ると、1つのコンポーネントは少なくとも以下のものを持っています.property、attribute、ページにレンダリングする方法、ライフサイクル、内部の状態などです.
その中でpropertyとattributeはコンポーネントが外部とコミュニケーションし、インタラクティブになる橋渡しであり、vueとreactはこの点での思想が一致しており、少なくとも使用上は同じような感じがします.
ページをレンダリングする方法もほとんど同じです.vueはReactより一歩多く、自分のものを使っているからです.vue形式のファイルは、vue-template-compilerでこのファイルを関数にコンパイルします.この関数にはrender関数があります.reactと同じです.
ライフサイクルを見ると、ほとんどのbeforeCreate、created、mounted、destroyedの方法があり、コンポーネントが指定された段階で一定の制御性を持つことを目的としています.
また、内部状態です.vueは関数を使用してオブジェクトを返します.reactはthisを直接使用して内部状態を定義します.その本質もあまり違いません.
ここまで来ると少し名堂が見えますが、vueでもreactでも、内部で実現されているものは多くないようです.さらに抽象的に,以上の機能を実現した関数であれば,一定の体系的,生きた,機能的に完備したコンポーネントであると考えられる.このような条件に達してこそ,定義されたコンポーネントが便利に運用され多重化されるからである.
上のようなコンポーネントに対する抽象的な考えを生んだのは、winterが私たちに2つの線を話して授業が終わった後でやっと分かったからです.
また,コンポーネント化されていない開発と比較すると,我々はこれらのものを備えておらず,実際に開発した場合でもこれらの考えは生じず,書かれたものはパッケージ性,体系性,多重性に劣っている.
最後に、私の理解に基づいてコンポーネントに次の定義を与えます.コンポーネントは、属性、方法、継承関係だけでなく、state(内部状態)、attribute(特性)、lifecycle(ライフサイクル)、UI、インタラクティブロジックを含むオブジェクトとして理解できます.偏向運転時の機能ユニットで、複雑な制御を持っています.一般的な意味でのオブジェクトよりも多くのものが見られますが、これだけのものが多いからこそ、コンポーネントと呼ばれています.
三、コンポーネント化の実現方法
私たちは白黒棋を書く練習のプログラミング能力を書く時、まず少しの機能を実現して、それから最適化して、いくつかの機能の独立した論理を関数でカプセル化して、書き終わった後、またclassを使って1つの完全な機能のカプセル化を行って、実はこれは1つのコンポーネントと見なすことができて、それも自分のUIと内部のインタラクティブな論理があるためです.
これはコンポーネントを書くだけで、コンポーネント化を具体的に実現するにはもっと多くのことを考える必要があります.たとえば、コンポーネントメカニズムはどのようなものですか?
コンポーネントメカニズムはコンポーネント化を実現する礎であり、あなたのコンポーネントが将来どのように成長するか、どのように使うか、使いにくいかを決定します.
一般的に、コンポーネントメカニズムにはコンポーネントの作成とマウントがどのように行われているのか、1つのコンポーネントがどのように作成されるかには様々な方法があり、vueとreactの差が大きく、コンポーネントをマウントするタイミングがあり、コンポーネントをレンダリングすることができます.
2つ目は、コンポーネントのライフサイクルがどのように定義されているか、何個定義するか、最も基本的なライフサイクルは3つあります.すなわち、作成、マウント、アンロードです.コンポーネントをより制御できるように、vueのように多くのライフサイクルを定義することができます.createの前にbeforeCreateがあり、コンポーネントの制御細粒度を細かくすることができます.
3つ目はイベントで、ここでのイベントは主にコンポーネントが外部と通信できるメカニズムであり、vueは$emitメソッドを定義し、reactが直接属性を使用する方法を定義しているが、vueの属性も関数を伝達することができ、イベント通信としても使用することができる.
4つ目はattributeとpropertyです.この2つの単語は特性と属性として理解できます.attributeは記述性を強調し、文字列しかありません.例えばimgラベルのsrc、aラベルのhrefなどはattributeの範疇に属しています.propertyは従属関係を強調しています.例えば、ある属性はあるコンポーネントにのみ属しています.このコンポーネントにこの属性を定義しました.では、属性値は内部のjsでしか設定できません.
5つ目はchildrenです.childrenはコンポーネントの中で非常に重要なメカニズムです.コンポーネントサポートがサポートされていないことと、どのようにレンダリングを追加するかを考慮する必要があります.winterがコンポーネント化を説明するときも、childrenを追加するために自分で書く方法です.ここではコードセグメントを示します.
for (let child of children) {
if (child instanceof Array) {
for (let c of child) {
if (typeof c === 'string') {
cmp.appendChild(new Text(c));
} else {
cmp.appendChild(c);
}
}
} else if (typeof child === 'object') {
cmp.appendChild(child);
} else {
cmp.appendChild(new Text(child.toString()));
}
}
6つ目は、あなたのコンポーネントをどのように記述するかです.現在よく見られるのはhtmlラベルをカスタマイズする方法で記述されています.vueとreactはこの点でも一致しており、JSX構文をサポートしています.vueは単一ファイルコンポーネントというより友好的な方法をサポートしています.
コンポーネントメカニズムの考慮を完了し、次に自分のコンポーネントシステムを構築する必要はありませんが、自分のコンポーネント化システムを構築すれば、ページを開発する際に半分の効果を達成することができます.
最も基本的なコンポーネントシステムにはlayout、input、form、table、messageなどが含まれています.これらのものはあなたの後続の開発プロセス全体を支えることができます.現在、私たちは開発時にelement-ui、antdなどのUIフレームワークを多少使用しています.彼らはそれぞれコンポーネントシステムを持っていて、ほぼ一致しています.