Можно ли использовать React без рендеринга HTML?

Ответ 1

С React >= 16.2 можно использовать любую из этих версий:

render() { 
   return false; 
}

render() { 
   return null; 
}

render() { 
   return []; 
}

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

Возврат undefined не работает.

Компонент, о котором я думаю, - это то, что вы передаете некоторым данным, и он отправит данные обратно в функцию javascript вне реакции.

Почему вы хотите создать для этого компонент? В большинстве случаев регулярной js-функции в существующем компоненте может быть достаточно.

Одна из наших возможностей заключается в том, что для установки побочного эффекта, когда компонент монтируется и срывает его, когда он отключается. Например, если у вас есть мобильное приложение ReactNative с портретной ориентацией, вы можете представить себе компонент <Landscape/>, который при монтировании позволит временно отображать приложение в альбомной ориентации, а при отключении ориентация будет reset для приложения по умолчанию. Вы можете управлять этим изменением ориентации на существующем компоненте, но создание выделенного компонента может быть более удобным и многоразовым.

Обратите внимание, что React также может выполняться на стороне сервера, поэтому я предполагаю, что его можно использовать таким образом, чтобы он не включал никаких модификаций DOM (но, возможно, только виртуальных вычислений DOM).

Ответ 2

Просто чтобы уточнить комментарии benno. ReactComponent.render метод doc утверждает:

Вы также можете вернуть null или false, чтобы указать, что вы не хотите ничего визуализированного. За кулисами React отображает тег <noscript> для работы с нашим текущим разностным алгоритмом. При возврате null или false, this.getDOMNode() вернет null.

Ответ 3

Это возможно. response-router - это пример библиотеки с компонентами, не отображающими HTML. См. https://github.com/rackt/react-router

Это компонент Route для реакции-fouter с методом render, возвращающим false:

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

})

Ответ 4

Да, это очень возможно и очень полезно, в случае ленивых компонентов загрузки.

Рассмотрим этот пример с реактивным маршрутизатором.

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