Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
2
Help us understand the problem. What is going on with this article?
@hand-dot

Reactのrendererを見よう見まねで作ってみる

More than 1 year has passed since last update.

Reactのrendererを見よう見まねで作ってみる

by hand-dot
1 / 18

事の発端


ほう😮


自己紹介

icon

今は主にフロントをやっていて、React,React-Native,Vueとかを普段は触っています。


つくったもの

react-voice

🔈React for Voice User Interface apps
https://github.com/hand-dot/react-voice
スクリーンショット 2019-05-08 13.58.17.png


どういうもの?

react-voiceのrendererを書いて、node上で動くVoice User InterfaceのためのReactをかけるようにしました。
code


デモ


ここまでのあゆみ

  1. [昨日の夕方] ツイート見る
  2. [昨日の夜] 開発
    • ink のコードを読む
    • 上を参考にレンダラーとコンポーネントを実装
    • PCが突然しゃべりはじめる
  3. [今] 俺がしゃべっている

inkって?

ink

🌈 React for interactive command-line apps
ターミナル用のReactのレンダラーで、facebookのjestにも使われているらしい
image.png

コードも小さいので参考になりました。


コードベース

|--src
|  |--components
|  |  |--Speak.jsx ←喋るコンポーネント
|  |  |--AsyncSpeak.jsx ←次の処理を待って喋るコンポーネント
|  |--index.js ←今はサンプルコード
|  |--render.js ←レンダーの関数
|  |--speak.js ←喋る関数


コードベース

|--src
|  |--components
|  |  |--Speak.jsx ←喋るコンポーネント
|  |  |--AsyncSpeak.jsx ←次の処理を待って喋るコンポーネント
|  |--index.js ←今はサンプルコード
|  |--render.js ←レンダーの関数 🔴
|  |--speak.js ←喋る関数


レンダーの関数を見せてもらおうか😏

どれどれー?

render.js
import ReactReconciler from "react-reconciler";

const reconciler = ReactReconciler({
  now: Date.now,
  getRootHostContext: () => null,
  prepareForCommit: () => null,
  resetAfterCommit: () => null,
  getChildHostContext: () => null,
  shouldSetTextContent: () => null,
  createInstance: () => null,
  createTextInstance: () => null,
  appendInitialChild: () => null,
  finalizeInitialChildren: () => null
});

const render = node => {
  reconciler.updateContainer(node, reconciler.createContainer());
};

export default render;

nullみが強い🤪


ところでこいつだれ?

render.js
import ReactReconciler from "react-reconciler"; // ←だれ?🙄

const reconciler = ReactReconciler({
  now: Date.now,
  getRootHostContext: () => null,
  prepareForCommit: () => null,
  resetAfterCommit: () => null,
  getChildHostContext: () => null,
  shouldSetTextContent: () => null,
  createInstance: () => null,
  createTextInstance: () => null,
  appendInitialChild: () => null,
  finalizeInitialChildren: () => null
});

const render = node => {
  reconciler.updateContainer(node, reconciler.createContainer());
};

export default render;

reconciler?

w.png
あーはいはい!平和をもたらそうとする人ねー!りょうかい~!


リコンサイラ (reconciler)

異なるレンダラ間でコードの一部を共有することでこの課題を解決します。React のこの箇所を “リコンサイラ(reconciler, 差分検出処理)” と呼んでいます。
React公式より抜粋: https://ja.reactjs.org/docs/codebase-overview.html#reconcilers

リコンサイラのおかげで宣言型レンダリング、独自コンポーネント、state、ライフサイクルメソッドがレンダラーのnullみが強くても動いた様子


TODO

  • Lesson component
  • Question component
  • Packaging for npm

その他もろもろ...
インプットしながらやっていく予定
もしこの辺りに知見がある方がいらしたら教えてください!


ありがとうございました🔈

2
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
hand-dot
サービスを作ったり、新しい技術を試したりすることが好きです。 基本的にJavaScript,HTML,CSSのフロントエンド周り、SEOやアクセス解析などのWeb全般が好きなのでそういう投稿が多めになると思いますが、よかったらフォーローしてください!
sharefull
短期間・短時間の仕事に特化したオンデマンドマッチングプラットフォーム「シェアフル」を開発中の、パーソルグループとランサーズの合弁会社

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
2
Help us understand the problem. What is going on with this article?