これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org クリーンアップを必要としない副作用 ReactがDOMを更新したあとで追加のコードを実行したいという場合があるので例を見ていく。 クラスを使った例 Reactのクラスコンポーネントで…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org 副作用フックの利用法 副作用フックによって関数コンポーネント内で副作用を実行することができるようになる。 サンプル import React, { useState, useEffect } from 'react'; f…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org ステートフックの利用法 まとめ useStateフックをReactからインポートする。そうすることで関数コンポーネント内でローカルstateが使えるようになる。 Example コンポーネント内…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org ステートフックの利用法 state の更新 クラスでは、this.stateを使うとcountステートを更新する。 <button onClick={() => this.setState({ count: this.state.count + 1 })}> Click me </button> 関数内ではすで…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org ステートフックの利用法 state の読み出し クラス内で現在のカウント値を表示したい場合、this.state.countを読み出す。 <p>You clicked {this.state.count} times</p> 関数内の場合はco…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org ステートフックの利用法 state 変数の宣言 クラスを使った動作では、コンストラク内でthis.stateを{ count: 0}にセットする方法で、 stateであるcountを０へと初期化する。 関数…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org ステートフックの利用法 フックとは何か？ ReactからuseStateをインポーするところから始める。 フックとはReactの機能に接続するための特別な関数。 例えばuseStateによってReac…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org ステートフックの利用法 クラスによる同等の例 フックでできることをクラスでやった場合の例 class Example extends React.Component { constructor(props) { super(props); this…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org フック早わかり その他のフック 使用頻度低めなものの便利なフックは存在している。 useContextを使うとReactのコンテクストをコンポーネントのネストなしに利用できるようにな…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org フック早わかり 独自フックの作成 state を用いたロジックをコンポーネント間で再利用したい場合 高階コンポーネントとレンダープロップを使って解決することが多かった。 カス…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org フック早わかり ✌️ フックのルール フックは JavaScript の関数だが2つルールがある。 フックは関数のトップレベルのみで呼び出すこと フックは React の関数コンポーネント内部…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org フック早わかり ⚡️ 副作用フック Reactコンポーネントの内部から外部データの取得などをする場合、他のコンポーネントに影響が出ることがある。 useEffectは副作用のためのフック…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org フック早わかり 要するにフックとは？ フックとは関数コンポーネントにstateやライフサイクルといったReactの機能を接続するための関数。 フックはReactをクラスなしに使うための…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org フック早わかり 複数の state 変数の宣言 配列の分割大入稿ぶんを使い、useStateを呼び出して宣言したstateの変数に異なる名前をつけることができる。 こうした名前はuseStateの…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org フック早わかり ステートフック 例 import React, { useState } from 'react'; function Example() { // Declare a new state variable, which we'll call "count" const [count…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org フックの導入 段階的な採用戦略 開発する側は逐一リリースされる機能を確認しているかというとそうでは無い。 なのでチュートリアルなどが揃うまで採用は待っておくのも一つの手…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org フックの導入 動機 フックが導入されるきっかけとなった要素がどんなものかみていきます。 ステートフルなロジックをコンポーネント間で再利用するのは難しい Reactは再利用可能…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org フックの導入 互換性のない変更はありません フックは互換性のない変更ではない。 完全にオプトイン。既存のコードに影響なく、フックを試すことが可能。 100％後方互換。破壊的…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org フックの導入 React16.8で追加された新機能 フックの導入 参考 import React, { useState } from 'react'; function Example() { // Declare a new state variable, which we'll …

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org JavaScript 環境の要件 React16はコレクション型Map、Setに依存しており、これらをネイティブに提供しないIE11や、 古いブラウザをサポートする場合にはグローバル環境のポリフィ…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org リファレンス testInstance.props 当該インスタンスに対応するコンポーネントのprops コンポーネントがあった場合、propsは{size: 'small'} となる。 testInstance.parent 名前の…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org リファレンス testInstance.type 当該点ストインスタンスに対応するコンポーネントの型 <Button /> はButton 型を持ってる。 コンポーネントの型を知りたいとかに使うのかな。 今日はここま</button>…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org リファレンス testInstance.findAllByProps() 与えたpropsを持つ全ての子テストインスタンスを検索する testInstance.findAllByProps(props) とすることで()内のpropsを検索し、…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク1 ja.reactjs.org リファレンス testInstance.findAll() testInstanceがtrueを返す全ての子テストインスタンスを検索する。 testInstance.findAllByType(type) typeで指定したタイプを持つ全ての…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク1 ja.reactjs.org リファレンス testInstance.findByProps() 与えられた props を持つ単一のテストインスタンスを検索する。 単一でない場合はエラーがスローされます。 今日はここまで

これは Reactのガイドを読んでいく記事です。 ガイドのリンク1 ja.reactjs.org リファレンス testInstance.find() test(testInstance)がtrueを返す単一の子テストインスタンスを検索する。 testに対してtrueを返すテストインスタンスの数が1ジャストでない場…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク1 ja.reactjs.org リファレンス testRenderer.root ツリー上の特定のノードに対してアサーションを行う際に役立つ、テストインスタンスを返す。 配下の他のテストインスタンスを検索する際に使用…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク1 ja.reactjs.org リファレンス testRenderer.getInstance() ルート要素に対応したインスタンスがある場合はそのまま返す。 関数コンポーネントはインスタンスを持っていないので、ルート要素が関…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク1 ja.reactjs.org リファレンス testRenderer.unmount() メモリ上のツリーをアンマウントし、適切なライフサイクルイベントを発生させる。 だんだん少ない気がするけど他が忙しいので... 今日はこ…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク1 ja.reactjs.org リファレンス testRenderer.update() メモリ上のツリーを新規のルート要素で再レンダーする。 ルートでのReact更新をシミュレートし、新しい要素が以前の要素と同じ方とkeyを持…