React勉強メモ
Reactオブジェクト
すべて利用可能なAPIはこのオブジェクトを通じてアクセルされる
意図的にミニマルになっている。
ReactDOMオブジェクト
ブラウザでアプリケーションをレンダリングする。
ReactDOM.render(
React.createElement('h1', null, 'Hello world'),
document.getElementById('app')
);
コンポーネントと下層のプラットフォーム(ブラウザDOM, canvas, native app)との架け橋。
一旦DOMからReactへの橋を渡れば、DOM操作を気にする必要はない。
babelを使うとJSXを使えるようになった。
JSXをold school Javascriptに変換してくれている。
Transpilation
ソースコードを受け取って同じ結果を達成する(しかし古いブラウザが理解するような文法を使っている)コードに変換するプロせう。
polyfills
とは違う。polyfills
は純粋なJavaScriptの世界の話。新しい構文が導入された場合は十分ではない。
新しい構文にはトランスパイルのステップが必要。
Custom Componentの作り方
Function Component
UIを返すただの関数
Class Component
extends React.Component
render()
メソッドを実装
this.props
で引数を取得する
construct()
で初期化。super()
呼ぶ
State
Componentsが彼ら自身をrenderするために使う任意のデータ。
一度renderでUIをbuildしたら、気にするのはデータの更新のみ。
データの更新後のUIの更新は変更をバッチ処理するquieuingメカニズムを採用している。
Reactのエラーハンドリング
Reactは人工イベントを使う。ブラウザのイベントをラップしてノーマライズしている。
Props vs. State
Props
外側の世界からコンポーネントを設定するメカニズム。
State
内側のデータのメンテナンス
原則
Props
を多く、State
を少なく。
アンチパターン: 初期状態のProps
Lifecycle Method
Mounting
Componentが最初にDOMに加えられる
Updating
setState
やprop
の変化によってComponentが更新さらる
Unmounting
コンポーネントがDOMから削除される
componentDidMount()
初期マウント、DOMへのコミットの後呼ばれる。
DOMを必要とする任意の初期化仕事をする場所
DOMを必要としないものはconstructorでされるべき
componentWillUnmount()
コンポーネントがDOMから削除される直前。
cleanupをする場所。
getSnapshotBeforeUpdate()
コンポーネントが更新される前
componentDidUpdate(previousProps, previousState, snapshot)
コンポーネントが更新されたとき
shouldComponentUpdate(newProps, newState)
最適化の機会
性能向上tip
不要な更新を避ける
map()
とかアロー関数式とか使うとコードがシンプルになったりする。
PropTypes
コンポーネントのpropsに期待する型を宣言できる。slight better JavaScriptと考えるといいかも。
constructorの中のbindは何をしている?
thisを固定している
render()
の舞台裏
virtual DOM treeというDOMの軽量表現を作って、変化の前後を比べて、処物結果を得る最小のDOM操作を施す。
関数コンポーネント
もともとはステートを持たないコンポーネントしか作れなかったが、React v16.8でhooksが導入されて至るところで使われるようになった。
状態管理
useState
クラスコンポーネント
this.state = {
data: initialData;
};
this.setState({
data: newData,
});
関数コンポーネント
const [data, setData] = React.useState(initialData);
二次元配列のある列をsortしたい
- 二次元配列をcopy
- ある列に着目してソート
- setState
onClick={sort}
クリックされる イベントからどこの列なのか判断する
useEffect()
EffectはSide Effectの略。
React Componentの主な仕事はpropsとstateをベースに何かをレンダリングすること。
データをフェッチしたり、イベントリスナーをセットアップするのはside effect
useEffect(callback, [dependency]);
レンダリングごとに呼ばれる。
[dependency]が指定されている場合、[dependency]のいずれかが変化していればcallbackが呼ばれる。
[dependency]が空のリストなら最初のレンダリングで一回だけ呼ばれる(similar to componentDidMound()
[dependcny]未指定ならレンダリングごとにcallbackが呼ばれる。
componentWillUnMound()
相当のものはcallbackのreturn valueに書く。
↑引数は空のリスト出ないといけない?
useLayoutEffect()
useEffect()
と似ているがレンダリング前に呼ばれる。
キホンは非同期に実行するuseEffect()
が望ましい
フリッカーを避けるときに用いられるべき。
カスタムフック
なかでuseState()
とuseEffect()
呼んでいた
他のフックを呼べるのはカスタムフックだけらしい
↑カスタムフックの定義は?
useReducer()
useState()
の代用。
最もシンプルな形式
fucntion myReducer(oldState, action) {
const newState = {};
// do something with `oldState` and `action`
return newState;
}
const [data, setData] = useState(initialData);
const [data, dispatch] = useReducer(myReducer, initialData);
JSX
HTMLとの違い
class -> className
for -> htmlFor
styleはオブジェクト
camelケースアトリビュート
例外: data-
やaria-
が接頭辞につく属性
Controlled component と Uncontorlled component
Controlled componet
text
,textarea
,select
にvalue
プロパティを付与
radio
,checkbox
にchecked
を付与
Create React App
一連のNode.jsスクリプト
npx create-react-app name
npm start
npm run build
package.json
設定が記述されている。npm i
でnode module
に依存関係がインストールされる。
reactが巧妙なことをしているところを理解したい
イベントハンドリングや変更追跡等