React Router の使い方
サンプルコードを写経途中。
BrowserRouter
index.tsx で <App /> を <BrowserRouter> というコンポーネントでラップすることで、
下の階層のコンポーネントで HTML5 の History API を利用した各種 の機能が使えるようになる。
ReactDOM.render( <BrowserRouter>
<App />
</BrowserRouter>, document.getElementById('root'),
);
Helmet
どこからでも HTML ドキュメン トヘッダが上書きできるようになるので、ページごとに <title> がセットできるようになる。
link
Effect Hook でライフサイクルを扱う
Effect Hook でライフサイクルを扱う
クラスコンポーネントのライフサイクルメソッド componentDidMount(), componentDidUpdate(), componentWillUnmount() に相当する機能を実現するもの
クラスコンポーネントのライフサイクルメソッドは、「このタイミングでこの処理をする」という発想だったのに対し、Effect Hook では「この処理はこのタイミングとこのタイミングでやる」という発想になっている。
useEffect()(() => {
doSomething();
return clearSomething();
}, [watchVar]);
useEffect()の第一引数に、引数なしの関数を設定すると、コンポーネントのレンダリングの直前に実行される（ここではdoSomething()）useEffect()の第二引数は、変数の配列で、省略可能。配列の中の変数が、前回のレンダリング時と変わらなければ、第一引数で渡された関数の中身の副作用処理実行がキャンセルされることになる- コンポーネントのアンマウント時にreturn 文が返される（ここでは
clearSomething()が実行される） - 第二引数を省略すると、レンダリングのたびに
doSomething()が実行される - 第二引数を空配列にすると、
doSomething()は初回のレンダリングでしか実行されない
こちらのほうが、コード量は減るかもしれない？
というわけで早速書いてみました。
Hooks・State Hook で Local State の管理・Git が重たいような気がする
Hooks
Hooks は様々な React の機能をクラスを使わずに利用 できるようにするもの。 Local State とか Lifecycle とか。
この Hooks の発表が React Conf 2018 の基調講演のなかでされたということなんだけど、ここでずいぶん流れが変わってしまっているんだろうなぁ。
それ以前のコードとか、技術書とかに思いを馳せる。
State Hook で Local State の管理
いつものようにサンプルコードを写経しました。といっても今回はすでに書いたコードを Hooks を使って書き換えただけ。
しかし本文にもあるけれど、行数減るし、こっちのほうが見通しがいいような気がします。
Git が重たいような気がする
ところでサンプルコードをコミットしたりしていて気になったので、私用環境の Git がなんか重い？遅い。
ファイルが多いから単純に処理に時間がかかっているんでしょうか？
リポジトリサイズが大きくなると、動作が極端に遅くなる
なるほど。しかし create したばかりの React app が大きいとは思えない…
関数コンポーネント・コンポーネントとコンテナ
関数コンポーネント
今後はクラスコンポーネントではなく関数コンポーネントを優先して書いていく流れ、とのこと。
以前書いたクラスコンポーネントのコードを関数コンポーネントに書き換えてみた。
コンポーネントとコンテナ
Presentational Component を「コンポーネント」、Container Component を「コンテナ」と呼ぶことが多いらしい。
クラスと関数、とはまた別の側面の分類。
本文より一部抜粋↓
| Presentational Component | Container Component |
|---|---|
| 「コンポーネント」 | 「コンテナ」 |
| 「どのように見えるか」に関心をもつ | 「どのように機能するか」に関心をもつ |
| データやふるまいを Props として一方的に受け取る | データやふるまいを他のコンポーネントに受け渡す |
| 自身の状態はもたない（UIの状態はのぞく） | しばしばデータの状態をもつ |
| データの変更に介入しない | しばしばデータの変更に介入して、任意の処理をおこなう |
| ProsやFunctionalみたいなコード | LocalStateみたいなコード |
React らしいきれいなコンポーネントの作りかた
- 関数コンポーネントで見た目だけを整えた Presentational Component をつくる
- それをインポ ートして Hooks や HOC で必要な機能を追加していって、別途 Container Component をつくる
コンポーネントのライフサイクルを知るためののサンプルコードを写経
ちなみに私のコードはサンプルコードにちょっと変更を加えていて、
componentDidUpdate で timeLeft が 0 のときに「60秒たちました！」というアラートメッセージを出すようにしました。
しかし今の状態だと、カウンターには 1 が表示されているときにこのアラートが出ます。 なんとなく 0 のときに出て欲しいのに。
でもこのコードだと 0 が表示される前にリセットされちゃうんですよね。。
reset だけじゃなくて start stop も実装してもっと細かく管理してあげるといいのかな。
私用環境を整理する・昨日はデザインパターン読書会だった
私用環境を整理する
強いチームはオフィスを捨てる: 37シグナルズが考える「働き方革命」
- 作者:ジェイソン・フリード,デイヴィッド・ハイネマイヤー・ハンソン
- 発売日: 2014/01/24
- メディア: 単行本
先日この↑本を読んでいて、そうだなーと共感したのが 仕事のPCを私用のPCを分ける という話。
そもそも会社に行って仕事をする、ということは場所を切り替えることで意識を切り替えていたわけだけど、 場所が切り替わらなくなった場合、マシンを切り替えるといい、ということ。
本当にこれはそうでそのように実践しているわけですが、
つまりセットアップもそれぞれでしています。
そうすると仕事環境と私用環境に差が出てきてしまうので、ときどきお手入れが必要になります。
私用環境は、そんなじ長い時間使わなかったりするので、ついついお手入れをさぼりがち。。 というわけで今久しぶりに私用環境のお手入れをしています。
みなさんこういうときどうしているのかなぁ。
お手入れは、おもに作業中の困ったに対して都度都度丁寧にやっていくこととした。 つまり、仕事環境と一気にあわせるぞ！というのではなく、朝活中などに出くわした環境差異に、その時やっていることの手をいったん止めて、その都度ちゃんと向き合うこと。
今日のお手入れ
昨日はデザインパターン読書会だった
- 作者:結城 浩
- 発売日: 2004/06/19
- メディア: 大型本
という点などがあり、Rubyist にはあまり読まれない本なのかしら…と思いつつ、やっぱり「デザインパターン」を学ぶには相変わらず最有力候補っぽい？
しかし素養のない私には、読んでいて新しい発見もいろいろある。
こちらをながめつつ、「Ruby 力をあげていきたい」という気持ちは復刊されたこちらのほうがいいのだろうな！
- 作者:Jay Fields,Shane Harvie,Martin Fowler,Kent Beck
- 発売日: 2010/02/27
- メディア: 大型本
コンポーネントのライフサイクル
コンポーネントのライフサイクル
初期化され、マウントされ、レンダリングされ、再レンダリングされ、アンマウントされ…というサイクルのなかで、
それぞれのフェーズに介入して処理を差し込むメソッドが用意されている。
Mounting フェーズ
constructor[void]static getDerivedStateFromProps(props, state)[State | null]render()[React.ReactNode]componentDidMount()[void]
Updating フェーズ
static getDerivedStateFromProps(props, state)[State | null]shouldComponentUpdate(nextProps, nextState)[boolean]render()[React.ReactNode]getSnapshotBeforeUpdate(prevProps, prevState)[Snapshot | null]componentDidUpdate(provProps, prevState, snapshot?)[void]
Upmounting フェーズ
componentWillUnmount()[void]
Error Handling フェーズ
componentDidCatch(error, info)[void]static getDerivedStateFromError(error)[State]
こうして見てみるとだいたい「メソッド名で何ができそうか」見当がつきますねぇ。 こういうのがあるよ、というのはまず覚えておく。
本文中に、ライフサイクルのなかで各フェーズとそれぞれのメソッドがどういう順番に呼ばれるかが表現された図があって、わかりやすかったです。
React コンポーネントのライフサイク ルって、バージョン 16.3 から 17 にかけて大きな変更が予定されててね
おっと。インターネットの便利情報では16系のメソッドが使われている可能性があるので、注意しましょう。
