HTML을 렌더링하지 않고 React를 사용할 수 있습니까?

HTML을 렌더링하지 않고 React를 사용할 수 있습니까?

---

HTML을 렌더링하지 않고 논리를 수행하고 데이터를 자바 스크립트 함수로 다시 보내는 데 React를 사용할 수 있는지 궁금합니다. 내가 생각하는 구성 요소는 데이터를 전달하는 것이며 반응 외부의 자바 스크립트 함수로 데이터를 다시 보낼 것입니다. 할 수 있다는 것을 알고 있으며 그 부분을 직접 수행했지만 필요에 따라 html을 렌더링하지 않고 어떻게 수행 할 수 있을지 모르겠습니다. 반응의 실제 사용 사례일까요?

---

React> = 16.2부터 다음 버전 중 하나를 사용할 수 있습니다.

render() { 
   return false; 
}

render() { 
   return null; 
}

render() { 
   return []; 
}

render() { 
   return <React.Fragment></React.Fragment>; 
}

render() { 
   return <></>; 
}

반환 undefined이 작동하지 않습니다.

---

내가 생각하는 구성 요소는 데이터를 전달하는 것이며 반응 외부의 자바 스크립트 함수로 데이터를 다시 보낼 것입니다.

이를위한 구성 요소를 생성하려는 이유는 무엇입니까? 대부분의 경우 기존 구성 요소의 일반 js 함수로 충분할 수 있습니다.

한 가지 사용 사례는 구성 요소가 마운트 될 때 부작용을 설정하고 마운트 해제 할 때 분해하는 예입니다. 예를 들어 세로 방향의 ReactNative 모바일 앱이있는 경우 <Landscape/>, 마운트되면 일시적으로 앱을 가로 방향으로 표시 할 수 있고 마운트 해제되면 방향이 앱 기본값으로 재설정 되는 구성 요소를 상상할 수 있습니다. 기존 구성 요소에서 이러한 방향 변경을 확실히 관리 할 수 ​​있지만 전용 구성 요소를 만드는 것이 더 편리하고 재사용 할 수 있습니다.

React는 서버 측에서도 실행할 수 있으므로 DOM 수정을 포함하지 않는 방식으로 사용할 수 있다고 생각합니다 (하지만 가상 DOM 계산 만 가능).

---

Benno의 의견을 명확히하기 위해. ReactComponent.render 방법 문서의 상태 :

null또는 반환 하거나 false렌더링하지 않으려는 것을 나타낼 수도 있습니다 . 이면에서 React는 <noscript>현재 diffing 알고리즘과 함께 작동 하도록 태그를 렌더링합니다 . 반환 할 때 null나 false, this.getDOMNode()돌아갑니다 null.

---

것이 가능하다. react-router는 HTML을 렌더링하지 않는 구성 요소가있는 라이브러리의 예입니다. 참조 https://github.com/rackt/react-router를

이것은 false를 반환하는 render 메소드가있는 react-fouter의 Route 컴포넌트입니다 :

const Route = React.createClass({

  statics: {
    createRouteFromReactElement
  },

  propTypes: {
    path: string,
    component,
    components,
    getComponent: func,
    getComponents: func
  },

  /* istanbul ignore next: sanity check */
  render() {
    invariant(
      false,
      '<Route> elements are for router configuration only and should not be rendered'
    )
  }

})

---

예, 지연 로딩 구성 요소의 경우 매우 가능하고 매우 유용합니다.

react-router로이 예제를 고려하십시오.

import React from 'react'
import { Route, Link } from 'react-router-dom'

function asyncComponent(getComponent) {
  return class AsyncComponent extends React.Component {
    static Component = null;
    state = { Component: AsyncComponent.Component };

    componentWillMount() {
      if (!this.state.Component) {
        getComponent().then(Component => {
          AsyncComponent.Component = Component
          this.setState({ Component })
        })
      }
    }
    render() {
      const { Component } = this.state
      if (Component) {
        return <Component {...this.props} />
      }
      return null
    }
  }
}

const Page1 = asyncComponent(() =>
  System.import('./Page1.js').then(module => module.default)
)
const Page2 = asyncComponent(() =>
  System.import('./Page2.js').then(module => module.default)
)
const Page3 = asyncComponent(() =>
  System.import('./Page3.js').then(module => module.default)
)

const ParentComponent = () => (
  <div>
    <ul>
      <li>
      <Link to="/page1">Page1</Link>
      </li>
      <li>
      <Link to="/page2">Page2</Link>
      </li>
      <li>
      <Link to="/page3">Page3</Link>
      </li>
    </ul>
    <div>
      <Route path="/page1" component={Page1}/>
      <Route path="/page2" component={Page2}/>
      <Route path="/page3" component={Page3}/>
    </div>
  </div>
)

참고URL : https://stackoverflow.com/questions/22104897/is-it-possible-to-use-react-without-rendering-html