Reactの用語が毎度こんがらがる【備忘録】

Reactって難しくないですか……

DOM

エレメント

<p></p>とか<div></div>とかの塊

ノード

開始タグ、終了タグ、中の文字、あいだのスペースなどの要素1つ1つを表す最小単位

関数コンポーネント

コンポーネント：Reactで画面に表示される部品の部分！

function コンポーネント名(props){}

で作って(ただし名前は大文字から始める！)

<コンポーネント名 />

で呼び出せる。

属性・Props

<コンポーネント名 属性名＝"" />

で属性を作るとpropsから取り出せる→「props.属性名」的な
(これは小文字始まりでいい)

クラスコンポーネント

クラスの中の関数＝メソッド

class コンポーネント名 extends React.Component
{
  render(){
    return
  }
}

で作る。renderメソッドは必須。

renderメソッド

クラスコンポーネントにrenderメソッドは必須。
表示するエレメントを返す。

constructorメソッド

最初に一度実行されるメソッド。

必ずsuper(props)を書く。
super(props)は継承しているクラスのconstructorを呼び出す。

constructor(){
super(props)
}

属性・Props

class コンポーネント名 extends 省略{
属性名=""
 constructor(props){
this.属性名=props.属性名
}

}

<コンポーネント名 属性名="" />

関数コンポーネントと同じくpropsで取ってくる

子エレメント

<コンポーネント名 >
ここ！
</コンポーネント名 >

取り出しは

this.props.children

クラスで使う値の保管

プロパティ

クラスに値を保管
コンポーネントじゃなくても使われる

属性・Props

コンポーネントの属性をまとめて保管
読み込み専用

ステート

「現在の状態」を扱う値を保管
自動更新される！！！！Reactの中心的機能

ステート

値の設定と呼び出し

constructor(props){
super(props);
this.state={
ステートの値名:値,
}
}
render(){
…
{this.state.ステートの値名}
…
}

「this.state.ステートの値名」で呼び出し（値の表示や条件分岐での利用など）はできるけど、更新はできない。更新する時は↓

値の更新

this.setState({
ステートの値名:値,
})

ここに入れなかった値はそのまま。

onclicktとかでthis.setStateの入ったメソッドを呼び出したりすることで使う。

バインド

コンポーネントでは、onClick属性だけだと動作しない。→バインドする必要がある。

タダのカウンターなら不要だけど、クリックでstate変えるタイプは必要。

クラスの中でメソッドを定義して、使う時

メソッド名(event){
this.setState({
ステートの値名:値,
})
}

(eventという引数で発生したイベントの情報をまとめたeventオブジェクトが取得できる
ex: event.target←イベントの発生したエレメントが取れる)

renderメソッドの中で

<button onClick={this.メソッド名} >

を使いたければconstructorメソッド内で

this.メソッド名=this.メソッド名.bind(this)

を入れる。

コンテキスト

複数のコンポーネントをまたがって使える属性の値。全体で共通して使えるから、グローバル変数的な感じ？

作成

//クラスの外
const コンテキスト変数名 = React.createContext(値(変数名など))

利用

//クラスの中
static contextType = コンテキスト変数名

で、

this.context.〇〇

で使える。

Provider(値の変更)

一時的にコンテキストの値を変える。

<コンテキスト名.Provider value={値}>
<コンポーネント名 />
<コンポーネント名 />
</コンテキスト名.Provider>

間に入っているコンポーネントは

class コンポーネント名 extends Components{
…
{this.context.変数名}
…
}

みたいになっている。

コンテキストの使いみち

テーマ的な。

フック Hooks

関数コンポーネントでstateが使える感じ。Reactの大変化。

値の設定と呼び出し

関数内で

const [変数、変数] = useState(初期値)

↑まとめて定義することもできる。
個別に、複数回定義していい。C言語とかの変数宣言と同じノリ。

return (
<p>{変数}</p>
)

で使える。
ちなみに、const [変数,変数]=は分割代入。複数の値を返す関数→各変数別々に値が入る

値の更新

setCount(変数+1)

などsetCountを使う。

クラスコンポーネントのstateとの違い

・クラスコンポーネントは保存されているが、関数コンポーネントは毎回ゼロからのスタートなので、変数が保持されない→→コンポーネントの状態として保持しておきたいものはすべてステートへ。

クラスコンポーネントはクラスなので、インスタンスとして実行中はそのまま保持される、でも関数はそれがない。

備考

map

JSXで繰り返し構文使えない！！→関数やメソッドの呼び出しはできる
mapを使う！(配列を再生成するメソッド)
マニアックなメソッドらしい

renderの中に

{配列.map((value)=>(
<p>{value.name}</p>
))}

アロー関数

const 変数名 = (引数) =>{関数の中身}

で使える。

急須で入れたようななにか