夢のかけら

Railsエンジニアの技術ブログ

React

【React】Hooksを使って関数コンポーネントに状態を持たせる

昔の話 昔は関数コンポーネントとクラスコンポーネントは明確に違った。 関数コンポーネント 状態を持たない ライフサイクルメソッド(componentDidMountなど)使えない クラスコンポーネント 状態を持つ ライフサイクルメソッドが使える このような違いあっ…

【React】高階コンポーネントを使ってみる

高階コンポーネントって何? 高階コンポーネントは高階関数と似ている。高階関数とは関数を戻り値とする関数のこと。 高階コンポーネントは引数でコンポーネントを受け取り、戻り値として新しいコンポーネントを返す関数のこと。 どんな時に使うの? クラス…

【React】Pessimistic UpdateとOptimistic Updateの違い

Pessimistic Updateとは? Pessimistic Update(悲観的な更新)とは非同期通信が成功するか分からないので、成功or失敗するまで待ってから手元のDOMを更新する方法である。非同期通信の結果を待つ必要があるので非常に遅い。 // post = {id: 1, name: 'hoge'}…

【React】コンポーネントを再利用できるようにするリファクタリング

例えばこのような2つのコンポーネントがある。これらのコンポーネントの問題点は何だろうか? 親コンポーネント state = { users: [{ id: 1, name: 'rin' }, { id: 2, name: 'sin' }] } render () { <div className="container"> <ListGroup items={this.state.users} /> <div> } 子コンポーネント const ListGroup = ({items}) => {</div></listgroup></div>…

【React】styled-componentsを使ってJavaScriptでCSSを書く

純粋なcssはエラーを吐かなかったり、クラス名を重複しないようにしたり、cssのためだけにクラス名をつけたり、と言ったデメリットが存在する。それを解決するstyled-componentsを使っていく。 インストール $ npm install styled-components エディタにstyl…

【React】子コンポーネントから親コンポーネントへデータを渡す

子が好きなタイミングで親のメソッド実行する Vueと同じように子コンポーネントの好きなタイミングで親コンポーネントに作成したカスタムイベントを発火させることができる。その時の引数としてデータを受け取る、という流れである。 注意点として、親コンポ…

【React】propsとstateの違い

props 親コンポーネントからもらうデータ 読み取り専用で変更することはできない state コンポーネントが持つデータ 変更が可能 コンポーネント内のプライベート変数のようなもの 他のコンポーネントはアクセスすることができない 親からもらうデータを加工…