Refactor işlevinden bir tepkime bileşenini ES6 sınıfına getir

Question

ES6 uygulamasında yeniyim. React bileşenini yazmak için farklı yollarla biraz kafanız karıştı. Bir "React.createClass" ile başladım ve daha sonra ES6 sınıfları sözdizimi ile "React.Component'i" genişletmek için taşındım. Onların

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 

Nasıl bu "işlevini" React.component uzanan ES6 sınıfına hareket planı ayrı bu şekilde bileşenlerini tanımlamak bakın şimdi Redux öğretici ardından

? Geri dönüş JSX render() yöntemi, sanırım değil mi? OnClick tamamlandı, metin bağımsız değişkenleri nedir?

Answer 1

Bileşeniniz aslında bir ES6 sınıfı yerine, salt bir işlev yapmak için en iyi yöntemdir; çünkü bu, props işlevinin bir işlevi olarak işlenebilir ve durumu korumaz. Yine de ES6 sözdizimini kullanabilirsiniz (dışa aktarma, ok işlevleri vb.).

Facebook's explanation: "İdeal bir dünyada, bileşenlerinizin çoğu vatansız işlevler olacaktır, çünkü gelecekte gereksiz kontrollerden ve bellek ayırmalarından kaçınarak bu bileşenlere özgü performans iyileştirmeleri yapabileceğiz. desen, mümkün olduğunda. "

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

ES6 sözdizimi eşdeğer olacak teşekkür ederiz:

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 

---

kodunuzu transpile için babel kullanıyorsanız ve class properties transform sonra aşağıdakileri yapabilirsiniz vardır:

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 

Açıkçası bu ikinci örnekte ca nnot "standart ES6" olarak kabul edilir, ancak statik özellikleri çok daha temiz buluyorum, bu yüzden bu yaklaşımı göstermeye değdiğini düşündüm.