第2週

反応の働き方を学ぶ

構成部品

反応器は破片を集めてウェブページを完成させ、これらの破片を素子と呼ぶ.

ライフサイクルとは?

コンポーネントがレンダリングの準備をしていた瞬間から、ページから消えるまで.

ライフサイクルは、作成/変更/削除に大別されます.
修正の場合.

素子がそのデータ状態を変化するとき

.

両親が私にくれたデータの道具が変わったとき、

レンダー

の親は

強制更新時

ダミードーム

👉 DOM:ツリー構造を持つモデルで、各HTMLユニットをオブジェクトとして扱う
どうして書きますか.
OMツリーを変更するたびにDOMを検索して変更するため、不要な演算が多すぎるため、これらの操作を使用する必要があります.
さぎょうモード
仮想DOMのすべての変更を実際のDOMと比較し、変更した部分のみを変更します.
=>renderが実行されます.
実際のDOMは、最初にページにアクセスしたときと仮想ドームを使用してデータを変更したときに表示されます.

第二講

クラス構成部品関数型構成部品があります.
2019年v 16.8から関数型素子のフックバック(hook)をサポートしますが、正式なドキュメントでは関数型素子とhookを同時に使用することをお勧めします.

しかし、なぜ部品を学ぶのでしょうか。

ここでは、クラス構成部品の理解と修正を学びます.
ライフサイクル関数はクラス構成部品でのみ使用できます.
レンダーの戻りに含まれる変更(要素)
これらの要素が仮想ドームから実際のドームに上昇すると、修正(更新)が完了します.

三講

構成部品

反応は重要で、素子を分けて、素子を積み上げます.
素子書き込みデータProps、State

Props

親からのデータ
Aという親とBという子がいます.
AがBにデータを与えると、このデータはBの柱になります.
propsは修正できません.

State

内のデータ、素子自体のデータ

水晶、生成自由.

ベスト4

輸出と輸入

export defaultの場合、カッコは必要ありません.
exportのみを使用する場合は、カッコが必要です
export {BucketList};
import {BucketList} from "./BucketList"
export default BucketList;
import BucketList from './BucketList';

5強

関数型構成部品をクラス構成部品に置き換える

//部品類
class App extends React.Component{
//初期化関数が必要、ジェネレータ
constructor(props){
super(props);
this.state = {
List:[「映画館へ行く」、「授業を聞く」、「カフェへ行く」、
}
}
//ドームに表現するために、レンダリングを作ります.JSXでは、少なくとも1つの戻り値が必要です
render () {
console.log(this.state.list)
return (

  <div className="App">
    {/* 자바스크립트 변수는 중괄호를 사용 */}
    <BucketList list={this.state.list} /* <= props명과 넘겨줄 데이터 *//>
  </div>
)

}
}
//関数構成部品
function App() {
return (

 <div className="App">
   <BucketList/>
 </div>

);
}

ベスト7

応答におけるCSSの使用

利益合併相殺現象
サブエレメントは、block;値がある場合、要素のmarginが親要素のmarginのように見える現象を連結消込現象と呼びます.
この場合、親要素はdisplay:blockではなくdisplay:blockとして保持できます.
height: vh; > スクリーン比を基準に高さを設定する値です.
width: vw; > スクリーン比を基準に幅を設定する値です.
display: flex; > flex要素を与えるサブ要素は、その持つコンテンツのサイズのみを占めます.

ベスト8

styled-componentパッケージの構文を学ぶ

//最初の文字は大文字
const MyStyled = styled.div width: 50vw; min-height: 150px; background-color: ${(props) => (props.bg_color)} ;
${}batic(`)で使用可能
(props)=>(props.bgcolor)上下同じ機能{(props)=>(props.bgcolor)}上下同じ機能(props)=>(props.bgc color)上下同じ機能{(props)=>{
return props.bg_color;
}}
3つの演算子が使用可能
${(props) => (props.bg_color? "red": "purple")}

10鋼-反応器からドーム元素を取得

もう一度聞き直す

getElementByIdとappendChildは本物のDOMに触れます.
このとき、仮想ドームにあるが、実際のドームにない場合はエラーが発生するため、DOM要素のインポート時にRefを使用します
Refは「ラベル」
関数型素子の場合、ライフサイクル法は使用できないため、反応フックが使用される.