これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org テストのレシピ集 セットアップ/後始末 通常Reactツリーをdocumentに結び付いたDOM要素として描画する。 テスト終了後にクリーンアップを行いdocumentからツリーをアンマウントす…
これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org テストのレシピ集 React コンポーネントのための一般的なテストのパターン集。 きのうみたJestで利用することを前提としたレシピ集。 ラインアップは以下のようになっている。 ・…
これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org テスト概要 推奨ツール Jestを使う。 jsdomを通じてDOMにアクセスできるJavaScriptテストランナーになる。 jsdomはブラウザ模倣環境だが、基本的にはこれで困らない。 最終的なテ…
これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org テスト概要 トレードオフ テストツールの選定にはトレードオフの考慮が発生する。 実行速度vs環境の現実度：フィードバックの早いツールはブラウザでの挙動を正確に再現しない 実…
これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org テスト概要 JavaScript同様にテストが可能。 大きく二つに分けることができる。 コンポーネントツリーのレンダリングをシンプルなテスト環境で行いその結果を検証する。 アプリケ…
これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org フック API リファレンス useDebugValue React DevToolsでカスタムフックのラベルを表示することができる。 useFriendStatysを使った例 function useFriendStatus(friendID) { co…
これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org フック API リファレンス useLayoutEffect useEffctと同様なもの。 DOMに変更があった後で同期的に副作用が呼ばれる。 DOMからレイアウトを読みだして同期的に再描画を行う場合に…
これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org フック API リファレンス useImperativeHandle useImperativeHandle(ref, createHandle, [deps]) refが使われたときに親コンポーネントに渡されるインスタンス値をカスタマイズす…
これは2020/7/8(水)に行われたビデオSaaSのエンジニアリング最前線に参加したメモと感想です。 目次 目次 イベントページ 内容(※敬称略) セッション 1. 今から始めるWebRTC (株式会社Worky Co-founder 高松智明 (@t14i_)） セッション2. WebRTC ビジネスの失…
www.amazon.co.jp ※Amazon 一気に読んだ。 本の内容は86パターンでパターンごとに切れているため非常に読みやすい。 大規模でも小規模でも組織として活動していくならばどこかしらフックするようになっている内容であった。 書かれているアンチパターンすべ…
これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org フック API リファレンス useRef const refContainer = useRef(initialValue); useRefは.current プロパティが渡された引数に初期化されているミュータブルなrefオブジェクトを返…
これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org フック API リファレンス useMemo ここまでに何度か登場しているuseMemo。 メモ化された値を返す。 メモ化とは大体キャッシュ化と似た機能であると理解した。 同じことするんだし…
これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org フック API リファレンス useCallback メモ化されたコールバックを返す。 インラインのコールバックとそれが依存する値の配列を渡すことでuseCallbackはメモ化したものを返し、 …
これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org フック API リファレンス useReducer useStateの代用品。 これを使う場面としては複数の値にまたがる複雑なstateロジックがある場合や、前のstateに基づいて次のstateを決める必…
これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org フック API リファレンス 追加のフック 特殊な用途のフックなので、あまり使う場面はなさそう。 ラインナップは以下になる。明日から細かくみていく。 useReducer useCallback us…
これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org フック API リファレンス useContext コンテクストオブジェクトを受け取り、現在値を返す。 現在値は直近のProviderが持つValueで決定される。 useContextに渡す引数はコンテクス…
これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org フック API リファレンス useEffect useEffect(didUpdate); 副作用を有する可能性のある命令型のコードを受け付ける。 DOMの書き換え、データの購読、タイマー、ロギングあるいは…
これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org フック API リファレンス 基本のフック useState const [state, setState] = useState(initialState); ステートフルな値とそれを更新するための関数を返す。 初回のレンダー時に…
これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org useYourImagination() カスタムフックによってロジック共有に関する柔軟性を得ることができる。 必要に応じて様々なカスタムフックを使うことができる。 function todosReducer(s…
これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org カスタムフックを使う 昨日の続き。 useFriendStatus に抽出したので、それを使えばよいだけ。 基本的にふるまいに変化はなし。 「カスタムフックは React の機能というよりは、…
これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org カスタムフックの抽出 カスタムフックとは名前がuseで始まり、ほかのフックを呼び出せるJavaScriptの関数。 import { useState, useEffect } from 'react'; function useFriendSt…
これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org 独自フックの作成 独自のフックを作成することでコンポーネントからロジックを抽出して再利用可能な関数を作ることが可能。 以下の例はフレンドがオンラインかオフラインかを示す…
これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org フックのルール 解説 Reactは一つのコンポーネント内で複数のstateや副作用を使うことができるのはこれまでに学んできた。 Reactはフックが呼ばれる順番に依存してuseStateの呼び…
これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org フックのルール ESLint プラグイン 昨日話題に出ていたルールを適用しやすくするためのプラグイン Create React App で実行した場合はデフォルトで含まれているらしく、それ以外…
これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org フックのルール フックはJavaScriptの関数だが、2つのルールに従う必要がある。 ルール強制のためにlinterプラグインが公式に提供されているのでそれを使うといいらしい。 www.np…
これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org 副作用を使う場合のヒント ヒント：副作用のスキップによるパフォーマンス改善 毎回レンダーをするとパフォーマンスへの影響が懸念される。 クラスの場合はcomponentDidUpdate の…
これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org 副作用を使う場合のヒント 解説：なぜ副作用は毎回の更新ごとに実行されるのか クラスの考えでいくとクリーンアップをアンマウントだけでなく再レンダー時に毎回発生するのか不思…
これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org 副作用を使う場合のヒント React経験者向きのuseEffectについての説明になるらしい。 ヒント：関心を分離するために複数の副作用を使う フック導入の動機はライフサイクルメソッ…
これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org クリーンアップを有する副作用 まとめ useEffect を用いることで、コンポーネントのレンダー後に実行される様々な種類の副作用を表現できる。 useEffect(() => { function handle…
これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org クリーンアップを有する副作用 外部のデータソースへの購読をセットアップしたい場合、メモリリークが発生しないようにクリーンアップが必要。 メモリリークを避けるためにクリー…
