コンポーネント
自作したコンポーネントは、大文字で始める
例
function Box() {
}
<Box />
props
コンポーネントに値を渡すことができる
例
function Box ( { size } ) {
return <p>size : {size}</p>;
}
{/*コンポーネントへの値の渡し方*/}
<Box size="10" />
state
- 何らかの値を「記憶」するために、コンポーネントはstateというものを使用する
- React は、useStateという特別な関数を提供しており、コンポーネントからこれを呼び出すことで「記憶」を行わせることができる
例
{/*useState関数でstateを得る。引数はstateの初期値。stateとそのset関数を配列で受け取る*/}
const [value, setValue] = useState(null);
- 各コンポーネントはそれぞれ独自のstateを保持している。それぞれのコンポーネントに格納されているstateは、他のものとは完全に独立している
- コンポーネントの set 関数を呼び出すと、React は自動的に内部にある子コンポーネントも更新する
- 複数の子コンポーネントからデータを収集、又は 子コンポーネント同士で通信したい場合、親コンポーネントに共有の state を宣言する
- 親コンポーネントがその state を子に prop 経由で渡すことで、子同士および親子間でコンポーネントが同期されるようになる
Reactその他
React DOM
Web ブラウザとやり取りするための React ライブラリ
renderの無限ループ
- stateのset関数を含む関数をrenderの中で呼ぶと、再render時にまたその関数が呼ばれ、またrenderされるため以下無限ループとなる
- propsとして渡す際の解決策は、原因となる関数を関数に包んで渡すこと
例
onFooClick={()=>handleClick(1)}
命名規則
Reactでは、イベントを表す props には onSomething という名前を使い、それらのイベントを処理するハンドラ関数の定義には handleSomething という名前を使うことが一般的
Reactにおけるリストのkey
- リストを再レンダーするとき、React は各リスト項目の key を見て項目を見分け、リスト要素を追加、変更、並替または削除すべきかを判定する
- key はコンポーネントとその兄弟間で一意であれば十分
例
<li key={foo}>bar</li>
その他
CSS
擬似要素
セレクターに付加するキーワードで、選択された要素の特定の部分にスタイル付けできるようにするもの。例｜::after。:が一つの場合は擬似クラス。
対象の要素に擬似的に要素を追加して装飾を適用することもできる（アイコンの追加など）
擬似クラス
- 特定の状態にある要素を選択するセレクタ。
- 例｜ある要素の最初の子要素、ポインターを当てた状態 など
JavaScript | Array
Array.prototype.fill()
例｜Array(9).fill(null)とすれば、値が全てnullである長さ9の配列を生成することができる
Array.prototype.slice(start, end)
- 配列のコピーメソッド。シャローコピーする
- startからendの直前までの配列を返す
- start省略時は0、end省略時はその配列のlengthの値となる
- よって
slice()とすれば、配列まるまるコピーとなる
スプレッド構文
- 配列の内容を展開する
...arry-> arry[0] arry[1] arry[2] arry[3] - 配列のコピー(浅いコピー)や要素の追加を簡単に行うことが可能
例
const arry2 = [...arry];
const arry3 = [-1, ...arry, 4];
Array.prototype.map()
- コールバック関数を配列のすべての要素に対して反復処理し、その結果からなる新しい配列を生成する
- コールバック関数の引数は次のとおり
- element
配列内で現在処理中の要素 - index
現在処理中の要素の配列内における添字 - array
map()が呼び出された配列
- element