反応レンダラ：概観

つは、最も先進的な機能の機能は、さまざまな環境のレンダラを書くことです.あなたは驚かれることができますが、反応を使用してCLIまたはハードウェアアプリケーションを作成することが可能です!この記事では、最も興味深い反応レンダラを見ていきます.

インク

Ink CLISの反応です.コンポーネントを使用してCLI出力をビルドしてテストできます.

デモのコード:

const Counter = () => {
  const [i, setI] = useState(0);

  useEffect(() => {
    setInterval(() => {
      setI(prev => prev + 1);
    }, 100);
  }, []);

  return <Color>
    {i} tests passed
  </Color>;
}

人気のある図書館で使われるインクGatsby , Parcel , Yarn 2 , など同様のライブラリもありますreact-blessed .

反応するハードウェア

React Hardware 反応コンポーネントを通していくつかのハードウェアデバイス( Arduinoなど)を操作できます.

デモのコード:

const App = () => {
  const [ledState, setLedState] = useState(false);

  useEffect(() => {
    setInterval(() => {
      setLedState(prev => !prev);
    }, 1000);
  }, []);

  return <Led pin={13} value={ledState ? 255 : 0} />
}
const PORT = 'dev/tty.usbmodem1411';
ReactHardware.render(<App />, PORT);

コンフィギュレーション

React Figma は、Figma . それはあなたのデザインのソースとして反応成分を使用することができます.

React Figma いくつかのAPIとfigmaの間の自動化や統合を作成する設計システムを記述するのに便利です.例えばOpenAI and react-jsx-parser ような驚くべき概念を作成することができます.Responmaに書かれたサンプルコードがあります.

import * as React from 'react';
import { Page, View, Text } from 'react-figma';

export const App = () => {
    return (
        <Page name="New page" isCurrent>
            <View>
                <View style={{ width: 200, height: 100, backgroundColor: '#dd55aa' }} />
                <Text style={{ color: '#ffffff' }}>text</Text>
            </View>
        </Page>
    );
};

Figmaは現在最も人気のあるデザインツールですが、他のエディタでは同じようなレンダラがあります.react-sketchapp スケッチについてreact-xd アドビXDのために.

三つの繊維に反応する

react-three-fiber は、threejs ウェブ上で、ネイティブに反応します.

サンプルコードがあります.

import ReactDOM from 'react-dom'
import React, { useRef, useState } from 'react'
import { Canvas, useFrame } from 'react-three-fiber'

function Box(props) {
  // This reference will give us direct access to the mesh
  const mesh = useRef()

  // Set up state for the hovered and active state
  const [hovered, setHover] = useState(false)
  const [active, setActive] = useState(false)

  // Rotate mesh every frame, this is outside of React without overhead
  useFrame(() => (mesh.current.rotation.x = mesh.current.rotation.y += 0.01))

  return (
    <mesh
      {...props}
      ref={mesh}
      scale={active ? [1.5, 1.5, 1.5] : [1, 1, 1]}
      onClick={(e) => setActive(!active)}
      onPointerOver={(e) => setHover(true)}
      onPointerOut={(e) => setHover(false)}>
      <boxBufferGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
    </mesh>
  )
}

ReactDOM.render(
  <Canvas>
    <ambientLight />
    <pointLight position={[10, 10, 10]} />
    <Box position={[-1.2, 0, 0]} />
    <Box position={[1.2, 0, 0]} />
  </Canvas>,
  document.getElementById('root')
)

再利用可能なコンポーネントを使用して動的なシーングラフを構築すると、スレッドを簡単に処理でき、コードベースに順序と健全性をもたらします.これらのコンポーネントは、状態の変化に反応し、ボックスの対話型であり、反応の無限の生態系にタップすることができます.
ライブラリは、パッケージなどの驚くべき生態系を持っていますreact-three-flex - フレックスボックスの実装です.react-xr , react-postprocessing その他多数.

ニールに反応する

react-nil 何もレンダリングしないカスタム反応レンダラです.

import React, { useState, useEffect } from "react"
import { render } from "react-nil"

function Foo() {
  const [active, set] = useState(false)
  useEffect(() => void setInterval(() => set((a) => !a), 1000), [])
  console.log(active)

  // This is a logical component without a view, it renders nothing,
  // but it has a real lifecycle and is managed by React regardless.
  return null
}

render(<Foo />)

このパッケージを使用すると、高レベルのコンポーネントの抽象化をノードに関連付けることができます.なぜ、クライアントのルートのようなあなたの残りのエンドポイントを管理しない、マウント/アンマウントのライフサイクル、コンポーネントの自己としての分離、清潔な副作用のユーザーとして.リクエスト等のサスペンス

反応DOX

react-docx DOCXのための真新しい反応調整者です.jsサンプルコード:

renderAsyncDocument(
  <section>
    <paragraph heading={Docx.HeadingLevel.HEADING_1}>
      You can pass props as if you are passing them to constructor
    </paragraph>
    <p>There are some helpful shortcuts for often used tags, like this</p>
    <p>
      <t>this one is for TextRun</t>
    </p>
    <p>
      <img
        src="base64 string or buffer object works"
        width={200}
        height={200}
      />
      <href
        src="http://localhost:8080"
        label={"For images and links shortcuts object are provided"}
      />
      This allows for removal of boilerplate for often used objects. In future
      more such object will be implemented.
    </p>
    <Component text="You can use componets of course, just like in react!">
      <t>A child</t>
    </Component>
  </section>
).then((document) => console.log("This is rendered docx document", document));

またreact-pdf and redocx 等しいニーズに使用することができます.

結論

あなた自身の反応レンダラを作成するためのインスピレーションを得る希望、それは可能ですReact Reconciler package . 私は、最も人気のあるレンダラに言及しませんでしたreact-dom or react-native , しかし、私はそれらの最も珍しいを収集しようとしました.何かお持ちですか.コメントにそれらを提案する!🙌

感謝

ヤロスラロー@losyear - 事実チェック、編集

リンク

Awesome React Renderer list

レンドラ

Ink

React Hardware

React Figma

react-three-fiber

react-nil

react-docx

レンダラの書き込み

React Reconciler package

Atul R – Beginners guide to Custom React Renderers

Manas Jayanth – Learn how React Reconciler package works by building your own lightweight React DOM

Aziz Khambati – Building an Async React Renderer with Diffing in Web Worker