反応の各方面
「やり直し」とは、定義とフィーチャーを簡単にまとめ、初期設定後に実行しようとします.次は反応の基本です!!配布方法から反応するコア!!コンポーネントのPropsとStateについて詳しく説明します🔥
最初の例はHelloReact!!簡単な反応アプリケーションがあり、h 1ラベルが1つしか含まれていません.npm startを使用してアプリケーションを実行する場合、アプリケーションの総容量は1.7 MBです.機能が一つもないので、こんなに大きな容量があるとは理解できません.
これは,開発を容易にするために反応器に多くの機能が追加されているからである.create react appの開発環境ファイルは非常に重い.ただし、これは開発者のみが使用し、ローカルでのみ使用するためです.しかし、人々が使うときは絶対に1.7 MBは使えないでしょう.(まだ安全上の問題があるかも…そうですか…)
create react appで開発環境を実行するとnpm run start(npm srart)が呼び出され、本番モードのappを作成するとき(コンストラクション時)にnpm run buildが使用されます.これにより、以前は存在しなかったbuildという内部(下部)ディレクトリが作成されます.その中を見るとindexhtmlがあります.▼▼
😱 空白が一つもなく、読めません...たまに読める単語を見ることができますが...?これはcreate react appが実際の生産環境で使用するappを作成するために、すでに持っているindexです.これはhtmlから不要な情報をすべてフィルタリングした結果です.(=>容量が非常に小さい!!)
srcで動作するソースコードも同様です.
実際には,サービス時に構築中のファイルに書き込むだけでよい.△これらがプロセスを経たエッセンスだと理解すれば、簡単になりますか.buildのファイルをWebサーバのキュールートディレクトリ(ドキュメントを検索するトップディレクトリ)に置けばいい!
左側のhtmlコード.これをJs-反応と書き換えた.
左側のheader、nav、article(シンボルコードと呼ばれる)の場合.の長さ
1000万線1億線ならどうなりますか?
これらのコードの維持と変更に多くの時間がかかります.
もしそうなら、開発者はこのような考えを持っています.
「ヘッドという名前だけで書いて、中身を別の場所に定義してもらえませんか?」次のようなアイデアを実現しましょう
これが反応素子の概念である.構成部品を定義する最も簡単な方法は、JavaScript関数を作成することです.上図の右側にあります!!
1つのファイルに数千のコンポーネントがある場合、ビューも混乱します.したがって、通常は、構成部品をファイルに分離して使用します.
ここでちょっと待って!!React Componentを宣言する方法は2つあります.クラス構成部品と関数構成部品.現在学習中の生活符号化はクラス素子を用いて説明する.△なにしろ、昔の授業だから.
Reactの最新の構文に従って、関数要素の使用と推奨を推奨します.
それでも.たまに部品を使っている会社があります…!
両者の違いを理解してPropsに移動します
<関数構成部品> classキーワードが必要です. render()メソッドが必要です. コンポーネントで継承する必要があります. 一般的な差異:
クラスでは、state、lifeCycle関連機能、メモリリソースが関数構成部品よりも多く使用され、任意のメソッドを定義できます.
関数型はstate、lifeCycle関連機能をサポートせず、メモリリソースは関数型素子より少なく使用され、素子宣言が便利です.こんな点がある
StateとPropsの使用にも大きな違いがあります.StateとPropsを一緒に勉強しましょう!
「配置」(props)は、構成部品で使用するデータの中で変わらないデータを処理するために使用されます.親(親)構成部品から子(子)構成部品にデータを転送する場合もpropsが使用されます.
たとえば、Contentという2つのコンポーネントを作成しましたが、常に同じ役割を果たしています.naver aタグを使用してh 1タグを作成すると、開発者が悩む可能性があります.
「動作は同じです.
あなたが伝えた因子を適用できませんか?"
ここで提案した概念はpropsです!
クラスを使用したサンプルの作成:
関数を宣言するときは、矢印を直接使用して宣言できます.要素に適用するには、thisを貼り付ける必要があります.
constキー+関数として宣言する必要があります.要素はthisを使用する必要はありません.
[ピクチャソース]-sdc 337 dclog,<関数とクラスの違い>
「ステータス」(State)を使用して、構成部品内のフローデータを処理します.
Propsが読み取り専用の場合、Stateは構成部品内部で変更可能な、変更可能な値です!!
ユーザが構成部品を使用する観点から、「フリー」は重要であり、「ステータス」は「フリー」の値に基づいて内部実装に必要なデータを区別する.
ユーザは、タグ属性に対応する配置操作要素を通過する.ユーザは、素子内部の動作および実施形態について何も知らない.これがSTATE
システム(たとえば、リアクター)は、構成部品を作成し、外部から配置し、実際に内部から配置した状態です.使用者と実施者は全く異なる.
クラスを使用したサンプルの作成:
コンストラクション関数ではこれです.stateの初期値を設定できます.stateはオブジェクトタイプです.構成部品が実行されると、プレゼンテーションメソッドよりも先に実行され、コンストラクション関数に初期化したいコンテンツが作成されます.
関数型構成部品は、usState関数としてstateを使用します.useState関数を呼び出すと、配列が返されます.最初の要素は現在の状態で、2番目の要素は状態置換関数です.
最も一般的な概念は、親エレメントのステータスを子エレメントに渡す場合、親エレメントのステータス値を子エレメントの自由値に渡すことです..
データが変更されても、サブコンポーネントに直接アクセスしてコードを変更する必要はありません.(ちょっと変な話ですがㅠ)ご理解をお願いします!!
導入方法(deploy)
最初の例はHelloReact!!簡単な反応アプリケーションがあり、h 1ラベルが1つしか含まれていません.npm startを使用してアプリケーションを実行する場合、アプリケーションの総容量は1.7 MBです.機能が一つもないので、こんなに大きな容量があるとは理解できません.
これは,開発を容易にするために反応器に多くの機能が追加されているからである.create react appの開発環境ファイルは非常に重い.ただし、これは開発者のみが使用し、ローカルでのみ使用するためです.しかし、人々が使うときは絶対に1.7 MBは使えないでしょう.(まだ安全上の問題があるかも…そうですか…)
create react appで開発環境を実行するとnpm run start(npm srart)が呼び出され、本番モードのappを作成するとき(コンストラクション時)にnpm run buildが使用されます.これにより、以前は存在しなかったbuildという内部(下部)ディレクトリが作成されます.その中を見るとindexhtmlがあります.▼▼
😱 空白が一つもなく、読めません...たまに読める単語を見ることができますが...?これはcreate react appが実際の生産環境で使用するappを作成するために、すでに持っているindexです.これはhtmlから不要な情報をすべてフィルタリングした結果です.(=>容量が非常に小さい!!)
srcで動作するソースコードも同様です.
実際には,サービス時に構築中のファイルに書き込むだけでよい.△これらがプロセスを経たエッセンスだと理解すれば、簡単になりますか.buildのファイルをWebサーバのキュールートディレクトリ(ドキュメントを検索するトップディレクトリ)に置けばいい!
構成部品
左側のhtmlコード.これをJs-反応と書き換えた.
左側のheader、nav、article(シンボルコードと呼ばれる)の場合.の長さ
1000万線1億線ならどうなりますか?
これらのコードの維持と変更に多くの時間がかかります.
もしそうなら、開発者はこのような考えを持っています.
「ヘッドという名前だけで書いて、中身を別の場所に定義してもらえませんか?」次のようなアイデアを実現しましょう
これが反応素子の概念である.構成部品を定義する最も簡単な方法は、JavaScript関数を作成することです.上図の右側にあります!!
1つのファイルに数千のコンポーネントがある場合、ビューも混乱します.したがって、通常は、構成部品をファイルに分離して使用します.
ここでちょっと待って!!React Componentを宣言する方法は2つあります.クラス構成部品と関数構成部品.現在学習中の生活符号化はクラス素子を用いて説明する.△なにしろ、昔の授業だから.
Reactの最新の構文に従って、関数要素の使用と推奨を推奨します.
それでも.たまに部品を使っている会社があります…!
両者の違いを理解してPropsに移動します
艦首部品と類属部品
宣言方法
<関数構成部品>
import React from 'react';
import './App.css';
function App() {
const name = 'react';
return <div className = "react">{name}</div>
}
export default App;
<ジェネリック構成部品>import React, {Component} from 'react';
class App extends Component {
render() {
const name = 'react';
return <div className="react">{name}</div>
}
}
export default App;
関数タイプとは異なるクラス要素には3つのコアがあります.クラスでは、state、lifeCycle関連機能、メモリリソースが関数構成部品よりも多く使用され、任意のメソッドを定義できます.
関数型はstate、lifeCycle関連機能をサポートせず、メモリリソースは関数型素子より少なく使用され、素子宣言が便利です.こんな点がある
StateとPropsの使用にも大きな違いがあります.StateとPropsを一緒に勉強しましょう!
フロプス(Props)
「配置」(props)は、構成部品で使用するデータの中で変わらないデータを処理するために使用されます.親(親)構成部品から子(子)構成部品にデータを転送する場合もpropsが使用されます.
たとえば、Contentという2つのコンポーネントを作成しましたが、常に同じ役割を果たしています.naver aタグを使用してh 1タグを作成すると、開発者が悩む可能性があります.
「動作は同じです.
あなたが伝えた因子を適用できませんか?"
ここで提案した概念はpropsです!
クラスを使用したサンプルの作成:
<宣言方式>
クラスコンポーネントのprops
class MyComponent extends Component {
render() {
const {dept, id, name} = this.props;
return{
<div>
안녕하세요! 저는 {dept}, {id}, {name} 입니다.
</div>
};
}
}
関数型素子のprops
function MyComponent = ({dept, id, name}) => {
return (
<div>
안녕하세요! 저는 {dept}, {id}, {name} 입니다.
</div>
)
}
<イベントハンドル>
クラス構成部品
関数を宣言するときは、矢印を直接使用して宣言できます.要素に適用するには、thisを貼り付ける必要があります.
関数構成部品でのイベントの処理
constキー+関数として宣言する必要があります.要素はthisを使用する必要はありません.
[ピクチャソース]-sdc 337 dclog,<関数とクラスの違い>
≪ステータス|Status|emdw≫
「ステータス」(State)を使用して、構成部品内のフローデータを処理します.
Propsが読み取り専用の場合、Stateは構成部品内部で変更可能な、変更可能な値です!!
ユーザが構成部品を使用する観点から、「フリー」は重要であり、「ステータス」は「フリー」の値に基づいて内部実装に必要なデータを区別する.
ユーザは、タグ属性に対応する配置操作要素を通過する.ユーザは、素子内部の動作および実施形態について何も知らない.これがSTATE
システム(たとえば、リアクター)は、構成部品を作成し、外部から配置し、実際に内部から配置した状態です.使用者と実施者は全く異なる.
クラスを使用したサンプルの作成:
宣言方法
クラス構成部品
コンストラクション関数ではこれです.stateの初期値を設定できます.stateはオブジェクトタイプです.構成部品が実行されると、プレゼンテーションメソッドよりも先に実行され、コンストラクション関数に初期化したいコンテンツが作成されます.
constructor(props) {
super(props);
this.state = {
monsters : [],
userInput: "",
};
}
this.setState関数を使用してstateの値を変更できます.onClick={() => {
this.setState({number:number+1});
}}
関数構成部品
関数型構成部品は、usState関数としてstateを使用します.useState関数を呼び出すと、配列が返されます.最初の要素は現在の状態で、2番目の要素は状態置換関数です.
const [message, setMessage] = useState("");
ステータスを変更する関数は、通常set+要素名(最初の文字は大文字)を使用します.最も一般的な概念は、親エレメントのステータスを子エレメントに渡す場合、親エレメントのステータス値を子エレメントの自由値に渡すことです..
データが変更されても、サブコンポーネントに直接アクセスしてコードを変更する必要はありません.(ちょっと変な話ですがㅠ)ご理解をお願いします!!
Reference
この問題について(反応の各方面), 我々は、より多くの情報をここで見つけました https://velog.io/@zwon/리액트의-이모저모テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol