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

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

html을 렌더링하지 않고 리액트를 사용하여 로직을 수행하고 javascript 함수로 데이터를 돌려보낼 수 있는지 궁금합니다.제가 생각하고 있는 컴포넌트는 데이터를 주고받는 것입니다.이 컴포넌트는 반응 이외의 Javascript 함수로 데이터를 되돌립니다.할 수 있다는 것을 알고 있고, 저도 그 부분을 해 보았습니다만, 필요한 대로 html을 렌더링하지 않고서는 어떻게 할 수 있을지 모르겠습니다.이것이 리액션의 실용적인 활용 사례라도 됩니까?

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

render() { 
   return false; 
}

render() { 
   return null; 
}

render() { 
   return []; 
}

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

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

돌아오는undefined동작하지 않습니다.

---

제가 생각하고 있는 컴포넌트는 데이터를 주고받는 것입니다.이 컴포넌트는 반응 이외의 Javascript 함수로 데이터를 되돌립니다.

왜 그 컴포넌트를 작성하려고 합니까?대부분의 경우 기존 컴포넌트의 정규 js 함수로 충분합니다.

예를 들어 컴포넌트가 마운트될 때 부작용을 설정하고 마운트 해제될 때 분해하는 경우가 있습니다.예를 들어 세로 방향의 ReactNative 모바일 앱이 있다면<Landscape/>이 컴포넌트는 마운트 시 일시적으로 가로 방향으로 앱을 표시할 수 있으며 마운트 해제 시 앱 기본 설정으로 리셋됩니다.기존 컴포넌트에서 이 방향 변경을 확실히 관리할 수 있지만 전용 컴포넌트를 작성하는 것이 편리하고 재사용할 수 있습니다.

React는 서버측에서도 동작할 수 있기 때문에, DOM 의 수정이 필요 없는(가상 DOM 의 계산 뿐일 가능성이 있습니다) 방법으로 사용할 수 있다고 생각합니다.

Benno의 코멘트를 명확히 하기 위해서입니다.React Component.render 메서드 문서에는 다음과 같이 기술되어 있습니다.

반품도 가능합니다.null또는false아무것도 하고 싶지 않다는 걸 나타내는 거죠무대 뒤에서 리액트는<noscript>현재 확산 알고리즘에서 사용할 수 있는 태그입니다.돌아올 때null또는false,this.getDOMNode()돌아온다null.

가능하다.react-module은 HTML을 렌더링하지 않는 컴포넌트를 가진 라이브러리의 예입니다.https://github.com/rackt/react-router 를 참조해 주세요.

이것은 렌더 메서드가 false를 반환하는 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'
    )
  }

})

네, 컴포넌트의 로딩이 느릴 경우 매우 유용하고 가능성이 높습니다.

리액트 라우터를 사용하는 경우의 이 예를 검토해 주십시오.

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