gaaamiiのブログ

間違ったことを書いている時があります。コメントやTwitter、ブコメなどでご指摘ください

react

(書き途中)React HooksのソースコードをuseEffectから読んでいく

最近React Hooksを使い始めた。それぞれ理解してまとめておきたい。まずは一番使いそうなuseEffectについて書いていこうと思った。 useEffectとは reactjs.org The Effect Hook lets you perform side effects in function components: とのこと。 使うのは…

TypeScriptのkeyofの使いどころ

読者登録したブログ記事をだらだらと巡回していて、こちらの記事を拝見しました。淡々と学んだことをブログに書いていてすごいなと思っていつも読ませてもらっています。 yurufuwa-tech.hatenablog.com 特定のオブジェクトのkeyの値しか許容しない、みたいな…

HTML要素を加工したReactコンポーネントに属性値を渡して展開して入れ込む方法

具体的にはlabelみたいなものですね。Labelというコンポーネントを作って、htmlのlabelと同じように属性値を渡しつつ、独自のスタイルを当てたりするコンポーネントをつくりたいみたいな。 こうする const Label = (props: React.Props<{}> & React.HTMLLabe…

Pageコンポーネントの共通処理をHOCにする

Reactでは継承よりも、HOCを使うのが推奨されている。HOCとはHigher Order Componentの略で、コンポーネントを引数にとってコンポーネントを返す関数のこと。 なので、たとえば似たような前処理をするページコンポーネントが複数あったとして、その共通処理…

React Routerを使って、イベントが起きたときにURLを変えつつ何か処理をする

SPAを作っていると、何かイベントが起きたときにURL変えつつなにか処理をしたいということがあります。 たとえば絞り込み検索で、クエリストリングだけ書き換えて画面更新したいというケース。具体的には/blog_posts から /blog_posts?tag=1 へ遷移するよう…

レイアウトのためのatomコンポーネントとかtemplates層とかの実装

Atomic Designの本「Atomic Design ~堅牢で使いやすいUIを効率良く設計する」を参考にしながら、こういう感じでやっていってる。 // atoms/AppLayout.tsx const AppLayout = (props: Props) => { const children = React.Children.toArray(props.children) r…

今さらReduxのSSOT原則とか状態管理について考える

Reduxを使ってウェブアプリケーションの開発をしていて、割と早い段階で、どうしてもReactのsetStateを呼びたい場面に遭遇しました。しかしReduxといえば、Single Source of Truthという原則があります。状態はすべて、Redux側で一つの状態ツリーで管理する…