Yoshiyuki Hisamatsu hisasann

(翻訳) React Hooks は魔法ではなく、ただの配列だ

この記事は https://medium.com/@ryardley/react-hooks-not-magic-just-arrays-cd4f1857236e の日本語訳です。途中で力尽きて雑な翻訳になってる箇所がいくつかあります。

私は、新しい Hooks の API の "magic" な挙動に悩んでいる人が結構いると聞いています。なのでこの構文の提案が、少なくとも表面的なレベルではどう動いているか、解説してみようと思います。

著者：青い鴉（ぶるくろ）さん @bluecrow2

これは結城浩さんの運用されていた YukiWiki に当時 Coffee 様 (青い鴉（ぶるくろ）さん）がかかれていた文章です。ただ 2018 年 3 月 7 日に YukiWiki が運用停止したため消えてしまいました。その記事のバックアップです。

昔、自分がとても感銘を受けた文章なので、このまま読めなくなるのはとてももったいないと思い、バックアップとして公開しています。

	/**
	* hmr前後で引き継ぎたいデータはまとめて外出する(Store)
	* Storeを書き換えた場合はページをリロードするか、もしくは別途accept()の処理を書く
	* Storeはconstructorの引数でどんどん子孫に渡していく。必要ならDIなりdecoratorなりでコードをキレイにする
	*/

	/** @type {Assets} 一度だけロードすればいいやつとかはまとめておくと良い */
	let assets = null;
	/** @type {Store} 復元したいデータは全部外にまとめておく or serialize的な保存・復元の方法が必要 */
	let store = null;

	<?xml version="1.0"?>
	<root>
	<item>
	<name>Control_L to Control_L</name>
	<appendix>(+ When you type Control_L only, send Escape + EISUU)</appendix>
	<identifier>remap.controlL2controlL_escape_orig</identifier>
	<autogen>--KeyOverlaidModifier-- KeyCode::CONTROL_L, KeyCode::CONTROL_L, KeyCode::JIS_EISUU, KeyCode::ESCAPE</autogen>
	</item>
	</root>

	# Add this file to your home directory then include it in ~/.profile using `. ~/.profile-emoji-me.sh`

	# These will show up in an emoji compatible terminal
	ME_EMOJI=(🐶 🐱 🐭 🐹 🐰 🦊 🐻 🐼 🐨 🐯 🦁 🐮 🐷 🐸 🐵 🐙);
	RANDOM_ME_EMOJI=${ME_EMOJI[$((RANDOM%14))]};
	export PS1="\h:\W \u $RANDOM_ME_EMOJI ";
	export PROMPT_COMMAND='update_terminal_cwd; echo -ne "\033]0;${RANDOM_ME_EMOJI##*/}\007"';

	<?xml version="1.0"?>
	<root>
	<item>
	<name>Control_L to Control_L</name>
	<appendix>(+ When you type Control_L only, send Escape + EISUU)</appendix>
	<identifier>remap.controlL2controlL_escape_orig</identifier>
	<autogen>--KeyOverlaidModifier-- KeyCode::CONTROL_L, KeyCode::CONTROL_L, KeyCode::JIS_EISUU, KeyCode::ESCAPE</autogen>
	</item>
	</root>

	interface callbackType{(argv :number) :void};

	function func(callback:callbackType){
	...
	}