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ファイルを入れるためのものっぽい

code:js

const 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')

code::

<svg width="100" height="100"　id="canvas">

<circle cx="50" cy="50" r="40" stroke="green" strokeWidth="4" fill="yellow" />

</svg>

code:js

handleClick(e) {

console.log("clicked");

this.setState(prevState => {

console.log(prevState);

return {

value: !prevState.value

};

});

}