是否可以在不呈现HTML的情况下使用React？

Question

我想知道是否有可能使用React做逻辑并将数据发送回javascript函数,而不渲染任何html.我想到的组件是你传递一些数据的东西,它会将数据发送回反应之外的javascript函数.我知道可以做到,我自己就完成了这个部分,但是我不确定如果不按需要渲染html你会怎么做.这甚至是反应的实际用例吗？

Answer 1

从React> = 16.2开始,可以使用以下任何一个版本:

render() { 
   return false; 
}

render() { 
   return null; 
}

render() { 
   return []; 
}

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

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

返回undefined不起作用.

我想到的组件是你传递一些数据的东西,它会将数据发送回反应之外的javascript函数.

为什么要为此创建组件？大多数情况下,现有组件中的常规js功能就足够了.

例如,一个用例是在安装组件时设置副作用并在卸下组件时将其拆除.例如,如果你有一个纵向移动的ReactNative移动应用程序,你可以设想一个<Landscape/>组件,当安装时,它将允许暂时以横向显示应用程序,并且在卸载时,方向将重置为app default.您当然可以在现有组件上管理此方向更改,但创建专用组件可能更方便且可重用.

请注意,React也可以在服务器端运行,所以我猜它可以以不涉及任何DOM修改(但可能只是虚拟DOM计算)的方式使用它.

Answer 2

只是为了澄清本诺的评论.该ReactComponent.render方法文档状态:

您也可以返回null或false表示您不想要渲染任何内容.在幕后,React呈现<noscript>标签以使用我们当前的差异算法.当返回null或者false,this.getDOMNode()将返回null.

Answer 3

有可能的.react-router是组件未呈现HTML的库的示例.请参阅https://github.com/rackt/react-router

这是react-fouter的Route组件,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'
    )
  }

})

Answer 4

是的,在延迟加载组件的情况下非常有用且非常有用.

考虑使用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>
)