Kann React ohne HTML-Rendering verwendet werden?

Question

Ich frage mich, ob es möglich ist, React zu verwenden, um Logik zu machen und Daten an eine JavaScript-Funktion zu senden, ohne HTML zu rendern. Die Komponente, an die ich denke, ist etwas, dem Sie einige Daten übergeben, und es sendet Daten an eine JavaScript-Funktion außerhalb von reagieren. Ich weiß, dass das gemacht werden kann, und ich habe diesen Teil selbst gemacht, aber ich bin mir nicht sicher, wie Sie das tun würden, ohne HTML zu rendern, wie es erforderlich ist. Ist das überhaupt ein praktischer Anwendungsfall?

Answer 1

Ab Reagieren> = 16.2 ist es möglich, jede dieser Versionen zu verwenden:

render() { 
    return false; 
} 

render() { 
    return null; 
} 

render() { 
    return []; 
} 

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

Rückkehr undefined funktioniert nicht.

---

Die Komponente Ich denke an etwas, das Sie einige Daten, passieren und es wird Daten zurück in eine Javascript-Funktion reagieren außerhalb senden.

Warum möchten Sie eine Komponente dafür erstellen? Die meiste Zeit kann eine normale js-Funktion in einer vorhandenen Komponente ausreichen.

Ein Anwendungsfall ist z. B. ein Nebeneffekt, wenn die Komponente montiert ist, und reißen Sie sie ab, wenn sie aushängen. Zum Beispiel, wenn Sie eine ReactNative Mobile App mit Hochformat haben, können Sie sich eine <Landscape/> Komponente vorstellen, die nach dem Mounten die App temporär im Querformat anzeigen lässt, und wenn sie nicht angehängt ist, wird die Ausrichtung auf App Standard zurückgesetzt. Sie können diese Orientierungsänderung für eine vorhandene Komponente sicher verwalten, aber das Erstellen einer dedizierten Komponente ist möglicherweise praktischer und wiederverwendbar.

Beachten Sie, dass React auch auf der Serverseite ausgeführt werden kann, also denke ich, dass es möglich ist, es so zu verwenden, dass es keine DOM-Modifikationen (aber vielleicht nur die virtuelle DOM-Berechnung) enthält.

Answer 2

Nur um Bennos Kommentare zu klären. Die ReactComponent.render method doc Staaten:

Sie können auch null oder false zurückkehren, um anzuzeigen, dass Sie nichts tun wollen gemacht. Hinter den Kulissen rendert React einen <noscript>-Tag, um mit unserem aktuellen Diffing-Algorithmus zu arbeiten. Wenn null oder false zurückgegeben wird, gibt this.getDOMNode()null zurück.

Answer 3

Es ist möglich. react-router ist ein Beispiel für eine Bibliothek mit Komponenten, die kein HTML darstellen. Siehe https://github.com/rackt/react-router

Dies ist die Strecke Komponente reagieren-Fouter mit einem Render-Methode false zurückgibt:

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

Ja es sehr viel möglich ist und sehr nützlich, bei verzögertes Laden Komponenten.

Betrachten Sie dieses Beispiel mit 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> 
)