Open26

React勉強メモ

hayaohayao

Reactオブジェクト

すべて利用可能なAPIはこのオブジェクトを通じてアクセルされる
意図的にミニマルになっている。

ReactDOMオブジェクト

ブラウザでアプリケーションをレンダリングする。

hayaohayao
            ReactDOM.render(
                React.createElement('h1', null, 'Hello world'),
                document.getElementById('app')
            );

コンポーネントと下層のプラットフォーム(ブラウザDOM, canvas, native app)との架け橋。
一旦DOMからReactへの橋を渡れば、DOM操作を気にする必要はない。

hayaohayao

babelを使うとJSXを使えるようになった。
JSXをold school Javascriptに変換してくれている。

Transpilation

ソースコードを受け取って同じ結果を達成する(しかし古いブラウザが理解するような文法を使っている)コードに変換するプロせう。

polyfillsとは違う。polyfillsは純粋なJavaScriptの世界の話。新しい構文が導入された場合は十分ではない。

新しい構文にはトランスパイルのステップが必要。

hayaohayao

Custom Componentの作り方

Function Component

UIを返すただの関数

Class Component

extends React.Component

render()メソッドを実装

this.propsで引数を取得する

construct()で初期化。super()呼ぶ

hayaohayao

State

Componentsが彼ら自身をrenderするために使う任意のデータ。
一度renderでUIをbuildしたら、気にするのはデータの更新のみ。

データの更新後のUIの更新は変更をバッチ処理するquieuingメカニズムを採用している。

hayaohayao

Reactのエラーハンドリング

Reactは人工イベントを使う。ブラウザのイベントをラップしてノーマライズしている。

hayaohayao

Props vs. State

Props

外側の世界からコンポーネントを設定するメカニズム。

State

内側のデータのメンテナンス

原則

Propsを多く、Stateを少なく。

アンチパターン: 初期状態のProps

hayaohayao

Lifecycle Method

Mounting

Componentが最初にDOMに加えられる

Updating

setStatepropの変化によってComponentが更新さらる

Unmounting

コンポーネントがDOMから削除される

hayaohayao

componentDidMount()

初期マウント、DOMへのコミットの後呼ばれる。
DOMを必要とする任意の初期化仕事をする場所
DOMを必要としないものはconstructorでされるべき

componentWillUnmount()

コンポーネントがDOMから削除される直前。
cleanupをする場所。

getSnapshotBeforeUpdate()

コンポーネントが更新される前

componentDidUpdate(previousProps, previousState, snapshot)

コンポーネントが更新されたとき

shouldComponentUpdate(newProps, newState)

最適化の機会

hayaohayao

map()とかアロー関数式とか使うとコードがシンプルになったりする。

PropTypes

コンポーネントのpropsに期待する型を宣言できる。slight better JavaScriptと考えるといいかも。

hayaohayao
hayaohayao

render()の舞台裏

virtual DOM treeというDOMの軽量表現を作って、変化の前後を比べて、処物結果を得る最小のDOM操作を施す。

hayaohayao

関数コンポーネント

もともとはステートを持たないコンポーネントしか作れなかったが、React v16.8でhooksが導入されて至るところで使われるようになった。

状態管理

useState

クラスコンポーネント

this.state = {
  data: initialData;
};

this.setState({
  data: newData,
});

関数コンポーネント

const [data, setData] = React.useState(initialData);
hayaohayao

二次元配列のある列をsortしたい

  1. 二次元配列をcopy
  2. ある列に着目してソート
  3. setState

onClick={sort}
クリックされる イベントからどこの列なのか判断する

hayaohayao

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に書く。
↑引数は空のリスト出ないといけない?

hayaohayao

useLayoutEffect()

useEffect()と似ているがレンダリング前に呼ばれる。
キホンは非同期に実行するuseEffect()が望ましい
フリッカーを避けるときに用いられるべき。

hayaohayao

カスタムフック

なかでuseState()useEffect()呼んでいた

他のフックを呼べるのはカスタムフックだけらしい
↑カスタムフックの定義は?

hayaohayao

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);
hayaohayao

JSX

HTMLとの違い

class -> className
for -> htmlFor

styleはオブジェクト

camelケースアトリビュート
例外: data-aria-が接頭辞につく属性

hayaohayao

Controlled component と Uncontorlled component

Controlled componet

text,textarea,selectvalueプロパティを付与
radio,checkboxcheckedを付与

hayaohayao

Create React App

一連のNode.jsスクリプト

npx create-react-app name
npm start
npm run build

package.json

設定が記述されている。npm inode moduleに依存関係がインストールされる。

hayaohayao
hayaohayao
hayaohayao

reactが巧妙なことをしているところを理解したい

イベントハンドリングや変更追跡等