React 렌더러: 개요

25829 단어 react

React 렌더러: 개요

React의 가장 진보된 기능 중 하나는 다양한 환경에 대한 렌더러를 작성하는 기능입니다. 놀랄 수도 있지만 React를 사용하여 CLI 또는 하드웨어 앱을 만들 수 있습니다! 이 기사에서는 가장 흥미로운 React 렌더러를 살펴보겠습니다.

잉크

Ink은 CLI용 React입니다. 구성 요소를 사용하여 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을 사용하면 React 구성 요소를 통해 일부 하드웨어 장치(예: 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 렌더러입니다. React 구성 요소를 디자인 소스로 사용할 수 있습니다.

React Figma은 디자인 시스템을 설명하고 일부 API와 Figma 간의 자동화 또는 통합을 생성하는 데 유용할 수 있습니다. 예를 들어 OpenAI 및 react-jsx-parser을 사용하면 . react-figma에 작성된 샘플 코드가 있습니다.

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는 현재 가장 인기 있는 디자인 도구이지만 다른 편집자도 유사한 렌더러를 가지고 있습니다. Sketch용react-sketchapp, Adobe XD용react-xd

반응 세 섬유

react-three-fiber은 웹 및 react-native에서 threejs에 대한 React 렌더러입니다.

샘플 코드가 있습니다.

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

재사용 가능한 구성 요소를 사용하여 선언적으로 동적 장면 그래프를 빌드하면 threejs를 더 쉽게 처리하고 코드 베이스에 질서와 온전함을 가져올 수 있습니다. 이러한 구성 요소는 상태 변경에 반응하고, 기본적으로 상호 작용하며, React의 무한한 생태계를 활용할 수 있습니다.

라이브러리에는 react-three-flex - flexbox 구현, 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 />)

이 패키지를 사용하면 Reacts 고수준 구성 요소 추상화를 Node 또는 필요한 모든 곳으로 가져올 수 있습니다. 클라이언트의 경로와 같은 REST 끝점, 마운트/마운트 수명 주기가 있는 구성 요소로서의 사용자, 자체 포함된 관심사 분리 및 깨끗한 부작용을 관리하지 않는 이유는 무엇입니까? 요청 등에 대한 보류

반응-docx

react-docx은 DOCX.js를 위한 새로운 React reconciler입니다. 샘플 코드:

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 및 redocx은 동일한 요구에 사용할 수 있습니다.

결론

React Reconciler package으로 인해 자신만의 React 렌더러를 만드는 데 영감을 얻으시기 바랍니다. react-dom 이나 react-native 과 같은 가장 유명한 렌더러는 언급하지 않았지만, 그중에서 가장 특이한 렌더러를 모아보았습니다. 추가 사항이 있습니까? 댓글로 추천해주세요! 🙌