React

【脱Redux】React hooks だけでグローバルな状態を管理する

前に書いた記事 Context と Hooks でグローバルな状態を管理する一番シンプルな方法 - 藤 遥のブログ を発展させた。 やりたいことは以下。 Redux を使わずに React だけでグローバルな状態を管理したい 状態は関心事に空間分けしたい TypeScript を使うが型…

Context と Hooks でグローバルな状態を管理する一番シンプルな方法

Redux を使わずに React だけでグローバルな状態を管理したい Context API はやや複雑なのでシンプルにしたい グローバルな状態は末端のコンポーネントでも更新できるようにしたい これらを満たすには、 Context API と Hooks API を組み合わせる。シンプル…

useEffect()の中で非同期処理を書く

React 16.8 から追加された Hooks API の useEffect() 。 Hooks API Reference – React useEffect() のコールバックに async 関数を与えたくなるけど、それは禁止されている。TypeScript で書いているとわかるが、useEffect() のコールバックに与える関数の…

Clean Architecture と React を組み合わせる

Clean Architecture と React を組み合わせるデモアプリが eduardomoroni/react-clean-architecture というリポジトリにあったので、コードを覗いたら勉強になった。 Clean Architecture を大づかみに理解する よく出てくる図。 私の理解している限りでは、 …

【React】recomposeモジュールをTypeScriptで使う

HOC(高階関数)は便利なんだけど、型と一緒に使おうとするとどうもうまくいかなくて、試行錯誤の結果やっと最小構成の例が作れたので書いておく。まあジェネリクスの練習ですね。これでそこそこの規模のものを作ろうとしたら消耗する予感しかしない。 Examp…

【React】HOCのレンダリングコスト

何をしたか React で HOC (Higher Order Component) が肥大化するとレンダリングのコストが増大するはずだと思って調べた。 もっと詳しく HOC は要するに高階関数であり、高階関数はロジックを抽象化するために優れたデザインパターンだが、パフォーマンス面…

ReactでMarkdown Editorを爆速で作る

n番煎じだけど気にしない。完成品。 React Markdown Editor Github 1. create-react-appでひな型を作る create-react-appを使う。 $ yarn global add create-react-app $ create-react-app react-markdown-editor 待つこと数十秒。yarn が速いので助かる。 2…

Reactでベンチマークテストするならreact-addons-perf

React でパフォーマンスが気になった時にレンダリングの時間をどうやって計測するんだろうと思ったら、公式にあった。 Performance tools react-addons-perf というツールで計測できる。 以下、簡単なサンプルコード。 import React, { Component } from 're…

Reactの最低限のテストをEnzymeで書く

React.js のテストをさくっと書きたい。とりあえず、 jsdom とか本格的なことはしたくない。最低限、コンポーネントがエラーを吐かずにレンダリングされることぐらいはテストしたい。そこで Mocha + Enzyme を使う。 Mocha Enzyme 必要なことは Enzyme の RE…