2 verschiedene Arten reagieren Komponente erstellen

Question

ich ein Tutorial reagieren folgenden und dies ist der Beispielcode der Autor Komponente reagieren, um eine Grund zu schaffen gegeben hat:

const React = require('react') 
const ReactDOM = require('react-dom') 

const App =() => { 
    return (
     <div className='app-container'> 
      <h1>Hello</h1> 
     </div> 
    ) 
} 

ReactDOM.render(<App />, document.getElementById('app')) 

Er behaupten, es ES6 ist.

Aber dann sah ich eine andere Möglichkeit, Komponente zu erstellen.

class App extends React.Component { 
    render(){ 
     return <h1>Hello</h1>; 

    } 
} 

hmm Ich bin jetzt verwirrt. Gibt es eine Standardmethode, um Dinge zu reagieren?

Answer 1

In React können Sie die sogenannten Stateful- und Stateless-Functional-Komponenten erstellen. Stateless-Komponenten sind einfache wiederverwendbare Komponenten, die den Zustand nicht beibehalten müssen. Hier ist eine kurze Demo (http://codepen.io/PiotrBerebecki/pen/yaoOKv), die Ihnen zeigt, wie Sie sie erstellen können und wie sie auf Requisiten zugreifen können, die von der übergeordneten (stateful) Komponente übergeben wurden.

Ein einfaches Beispiel kann eine stateful App Komponente auf Facebook.com sein. Es könnte den Status beibehalten, um zu verfolgen, ob der Benutzer an- oder abgemeldet ist. Dann würde es in seiner render() Methode eine LoginLogout zustandslose Knopfkomponente zeigen, die ihm den gegenwärtigen Zustand übergibt. Die LoginLogout staatenlos Komponente würde dann zeigen entweder:.

• ‚Anmelden‘ Text, wenn der Benutzer nicht angemeldet ist, oder
• ‚Abmelden‘ Text, wenn Benutzer angemeldet ist

Sie können erfahren Sie mehr über Stateful vs staatenlos Komponenten hier: ReactJS difference between stateful and stateless und hier React.createClass vs. ES6 arrow function

// Stateful component 
class FacelookApp extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     isLoggedIn: false 
    }; 
    } 

    receiveClick() { 
    this.setState({ 
     isLoggedIn: !this.state.isLoggedIn 
    }); 
    } 

    render() { 
    return (
     <div> 
     <h4>Welcome, I'm a stateful parent called Facelook App</h4> 
     <p>I maintain state to monitor if my awesome user logged 
      in. Are you logged in?<br /> 
      <b>{String(this.state.isLoggedIn)}</b> 
     </p><br /> 

     <p>Hi, we are three stateless (dumb) LoginLogout buttons 
      generated using different ES6 syntax but having the same 
      functionality. We don't maintain state. We will tell 
      our parent if the user clicks on us. What we render is 
      decided by the value of the prop sent to us by our parent. 
     </p> 

     <LoginLogout1 handleClick={this.receiveClick.bind(this)} 
       isLoggedIn={this.state.isLoggedIn}/> 

     <LoginLogout2 handleClick={this.receiveClick.bind(this)} 
       isLoggedIn={this.state.isLoggedIn}/> 

     <LoginLogout3 handleClick={this.receiveClick.bind(this)} 
       isLoggedIn={this.state.isLoggedIn}/> 
     </div> 
    ); 
    } 
} 


// Stateless functional components 
// created in 3 equally valid ways 
const LoginLogout1 = (props) => { 
    return (
    <div> 
     <button onClick={() => props.handleClick()}> 
     LoginLogout v1 --- {props.isLoggedIn ? 'Log Out' : 'Log In'} 
     </button> 
    </div> 
); 
}; 

// or 
const LoginLogout2 = ({handleClick, isLoggedIn}) => (
    <div> 
     <button onClick={() => handleClick()}> 
     LoginLogout v2 --- {isLoggedIn ? 'Log Out' : 'Log In'} 
     </button> 
    </div> 
); 

// or 
const LoginLogout3 = ({handleClick, isLoggedIn}) => { 
    return (
    <div> 
     <button onClick={() => handleClick()}> 
     LoginLogout v3 --- {isLoggedIn ? 'Log Out' : 'Log In'} 
     </button> 
    </div> 
); 
}; 



ReactDOM.render(
    <FacelookApp />, 
    document.getElementById('app') 
); 

Answer 2

Beide sind "gleichermaßen Standard". Obwohl die Syntax für den zweiten Fall deaktiviert ist. Es sollte lesen class App extends React.Component {

Der zweite Ansatz ist der allgemeinste, weil es Zustand, zusätzliche Funktionalität neben den Rendern und Komponenten Lebensdauer Methoden usw. erlaubt. Aber wenn Sie "funktionale" Komponenten haben, die nur etwas auf ihrer Basis anzeigen Requisiten, Sie haben den ersten Ansatz als Abkürzung für eine Klasse mit nur der Render-Methode. Beim Aufruf von .render React weiß, wie man mit den beiden Fällen umgeht.

Answer 3

const App =() => { 
    return (
    <div className='app-container'> 
     <h1>Hello</h1> 
    </div> 
) 
} 

ist „zustandslose Funktionskomponente“ bezeichnet, was nicht Zustand

https://facebook.github.io/react/docs/reusable-components.html#stateless-functions

das ein anderes ist eine normale Komponente haben kann.