React
Reactはトラバースをかつて再帰呼び出しで実装していた
再帰呼び出しは中断できない
そのため、大きくなった時にUIをブロックする
だから最近のReactではファイバーを使って中断可能にしてる
昔の実装にどういう問題があって、だからどう変更したのか、それによってライブラリのユーザがどのように書き方を変えなければならなかったか(状態更新の非同期化とか)が解説されてとても良い
副作用の優先度の話
ユーザー入力イベントはハイプライオリティになっている
だからそこで重い処理をすると入力がブロックされてユーザが不快
ロープライオリティに切り出してやることでユーザの入力は快適になる
エクスパイアの時に同期的に実行される
サスペンス
エラーバウンダリーと類似の仕組み
エラーを投げる代わりにプロミスを投げる
ライブラリ内部で即座にキャッチされて親リンクを非同期にたどっていく
時間がかかった時だけローディング出したりできる
面白いしユーザのストレスを減らすのにとても重要そうだけど、まだあまり枯れてなさそう
既存のプロジェクトを部分的にReact化する
新しいものを作る時もこのテンプレから始めるので良さそう
ツールチェーンの構築は、必要性を感じてから（十分複雑になってから）やる
onClickはhandleClickで受ける
Props are read-only
なるほど、モデルとビューの分離か
stateの更新はthis.setStateに、前のstateを引数として取って新しいstateを作って返す関数を渡す
「クリックすると色が変わる丸」というコンポーネント
自分で開発環境を作らなくてもブラウザ上で色々できすぎて、逆に自分で開発環境を作るのがめんどくさいと思ってしまうが、とはいえブラウザ上だけでずっと開発するのもそれはそれで辛い。仕方ない。
With SVG
JSコード中にHTML的なものを書くJSX
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
Babelで変換
これはSVGファイルを入れるためのものっぽい
jsconst e = React.createElement;
class LikeButton extends React.Component {
constructor(props) {
super(props);
this.state = { liked: false };
}
render() {
if (this.state.liked) {
return 'You liked this.';
}
return e(
'button',
{ onClick: () => this.setState({ liked: true }) },
'Like'
);
}
}
ReactDOM.render(
e(LikeButton),
document.getElementById('root')
);
console.log('OK')
:<svg width="100" height="100" id="canvas">
<circle cx="50" cy="50" r="40" stroke="green" strokeWidth="4" fill="yellow" />
</svg>
js handleClick(e) {
console.log("clicked");
this.setState(prevState => {
console.log(prevState);
return {
value: !prevState.value
};
});
}