是否可以在不渲染 HTML 的情况下使用 React？

Posted 2023-02-21

【中文标题】是否可以在不渲染 HTML 的情况下使用 React？

【英文标题】：Is it possible to use React without rendering HTML?

【发布时间】：2014-04-02 00:43:03

【问题描述】：

我想知道是否可以使用 React 来执行逻辑并将数据发送回 javascript 函数，而无需渲染任何 html。我正在考虑的组件是您将一些数据传递给的东西，它会将数据发送回 react 之外的 javascript 函数。我知道这是可以做到的，我自己已经完成了那部分，但我不确定如果不按要求呈现 html，你将如何做到这一点。这甚至是 React 的实际用例吗？

【问题讨论】：

React 是一个用于构建视图的库。 React 的哪些特性让你想在你的任务中使用它？

【参考方案1】：

从 React >= 16.2 开始，可以使用以下任何版本：

render()  
   return false; 


render()  
   return null; 


render()  
   return []; 


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


render()  
   return <></>; 

返回undefined 不起作用。

---

我正在考虑的组件是您将一些数据传递给的组件， 它会将数据发送回 react 之外的 javascript 函数。

您为什么要为此创建一个组件？大多数情况下，现有组件中的常规 js 函数就足够了。

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

请注意，React 也可以在服务器端运行，所以我想可以以不涉及任何 DOM 修改（但可能只涉及虚拟 DOM 计算）的方式使用它。

【讨论】：

不，render() 方法不能返回空数组或除其他 React 组件之外的任何内容。

它可以返回null或false，如文档facebook.github.io/react/docs/component-specs.html#render中所述

确实，看起来它是 0.11 中的新功能：facebook.github.io/react/blog/2014/07/17/…

为什么返回false？这不意味着render() 在问一个二元问题吗？在这种情况下，您应该返回 null，因为这就是您要呈现的内容。

在我做这个的时候偶然发现了这个，所以回答这个问题：“你为什么要为此创建一个组件？一些常规的 javascript 函数还不够吗？”至少在我的情况下，我可以使用架构附带的不错的框架功能，例如使用 react-redux 将组件连接到我的状态并传入 props 以及拥有 propTypes。对某些人来说，这可能不足以验证 - 我很想听听相反的意见。

【参考方案2】：

只是为了澄清 benno 的 cmets。 ReactComponent.render method doc 声明：

您还可以返回null 或false 以表明您不希望呈现任何内容。在幕后，React 渲染了一个<noscript> 标签来与我们当前的差异算法一起工作。返回null或false时，this.getDOMNode()将返回null。

【参考方案3】：

这是可能的。 react-router 是一个带有不呈现 HTML 的组件的库的示例。见https://github.com/rackt/react-router

这是 react-fourer 的 Route 组件，其渲染方法返回 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】：

是的，在延迟加载组件的情况下，它很有可能并且非常有用。

考虑这个带有 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>
)