Umgestalten Reagieren Komponente von Funktion zu ES6 Klasse

Question

Ich bin neu in ES6. Ein bisschen verwirrt über verschiedene Möglichkeiten, eine React-Komponente zu schreiben. Ich begann mit einer "React.createClass" und wechselte dann zu "extends React.Component" mit ES6-Klassensyntax.

Nach Redux Tutorial jetzt sehe ich sie definieren Komponenten auf diese Weise

import React, { PropTypes } from 'react' 

const Todo = ({ onClick, completed, text }) => (
    <li onClick={onClick} style={{ textDecoration: completed ? 'line-through' : 'none' }} > 
     {text} 
    </li> 
) 

Todo.propTypes = { 
    onClick: PropTypes.func.isRequired, 
    completed: PropTypes.bool.isRequired, 
    text: PropTypes.string.isRequired 
} 

export default Todo 

Wie kann ich diese „Funktion“ Refactoring zu einer ES6 Klasse bewegt, die React.component erstreckt? Ich denke, die Rückgabe JSX ist die render() -Methode, oder? Was ist mit onClick, abgeschlossen, Textargumente?

Danke

Answer 1

Für Ihre Komponente ist eigentlich am besten, um es zu einer reinen Funktion machen, anstatt eine ES6-Klasse, weil es als eine Funktion seiner props rendern kann und nicht beibehalten Zustand. Sie können jedoch weiterhin die ES6-Syntax verwenden (Export, Pfeilfunktionen usw.).

Facebook's explanation: "In einer idealen Welt wären die meisten Ihrer Komponenten zustandslose Funktionen, da wir in Zukunft auch Leistungsoptimierungen für diese Komponenten vornehmen können, indem unnötige Prüfungen und Speicherzuweisungen vermieden werden Muster, wenn möglich. "

import { PropTypes } from 'react' 

function Todo = (props) => (
    <li onClick={props.onClick} style={{ textDecoration: props.completed ? 'line-through' : 'none' }} > 
     {props.text} 
    </li> 
) 

Todo.propTypes = { 
    onClick: PropTypes.func.isRequired, 
    completed: PropTypes.bool.isRequired, 
    text: PropTypes.string.isRequired 
} 

export default Todo 

Answer 2

Die äquivalente ES6 Syntax wäre:

import React, { Component, PropTypes } from 'react' 

class Todo extends Component { 
    render() { 
    const { onClick, completed, text } = this.props 

    return (
     <li onClick={onClick} style={{ textDecoration: completed ? 'line-through' : 'none' }} > 
      {text} 
     </li> 
    ) 
    } 
} 
Todo.propTypes = { 
    onClick: PropTypes.func.isRequired, 
    completed: PropTypes.bool.isRequired, 
    text: PropTypes.string.isRequired 
} 

export default Todo 

---

Wenn Sie babel verwenden, um Ihren Code zu transpile und Sie haben die class properties transform dann können Sie folgendes tun:

import React, { Component, PropTypes } from 'react' 

class Todo extends Component { 
    static propTypes = { 
    onClick: PropTypes.func.isRequired, 
    completed: PropTypes.bool.isRequired, 
    text: PropTypes.string.isRequired 
    } 

    render() { 
    const { onClick, completed, text } = this.props 

    return (
     <li onClick={onClick} style={{ textDecoration: completed ? 'line-through' : 'none' }} > 
      {text} 
     </li> 
    ) 
    } 
} 

export default Todo 

einfach klar zu sein, dieses zweite Beispiel ca Nicht als "Standard ES6" zu betrachten, aber ich finde die statischen Eigenschaften so viel sauberer, so dass ich dachte, dass es sich auch lohnt, diesen Ansatz zu zeigen.