Najlepsze praktyki w zakresie stylów kodu ES6

Question

Niedawno zacząłem uczyć się ReactJS, a co za tym idzie - ES6. Jestem dość zaznajomiony z ES5, ale niektóre rzeczy nie są dla mnie jasne.

Przykład 1: Metody składni

co jest różnicą między dwoma metodami?

export class InvoiceForm extends React.Component { 
    methodName1() { 
    } 

    methodName2 =() => { 

    }; 
} 

Przykład 2: Właściwości klasy poza

class Greeting extends React.Component { 
    render() { 
    return (
     <h1>Hello, {this.props.name}</h1> 
    ); 
    } 
} 

Greeting.propTypes = { 
    name: PropTypes.string 
}; 

propTypes poza klasy. Ale dlaczego? Przyjechałem z python i jak dla mnie, co następuje jest bardziej poprawne

class Greeting extends React.Component { 
    static propTypes = { 
    name: PropTypes.string 
    } 
    render() { 
    return (
     <h1>Hello, {this.props.name}</h1> 
    ); 
    } 
} 

Answer 1

Jaka jest różnica między następującymi dwiema metodami?

methodName1() { } 

powyżej z normalnych this kluczowe dla tej funkcji w kontekście odnosi się do samej funkcji.

Więc jeśli próby uzyskania dostępu do React klasy Właściwości/funkcje jak this.setState dostaniesz błąd (jeśli nie zostały wykorzystane w dowolnym miejscu wiązania dla methodName1 jak:

this.methodName1 = this.methondName1.bind(this) prefarbaly chcesz zrobić wewnątrz metody konstruktora.

Jeśli chcesz dowiedzieć się więcej o this wiążące widać this Article

jednak w drugiej składni methodName2, funkcja jest napisane przy użyciu składni Strzałka funkcyjny.

methodName2 =() => { 
    }; 

Strzała funkcja nie posiada własnego to argumenty, super lub new.target. W związku z tym to słowo kluczowe w tej funkcji będzie odnosić się do kontekstu klasy React (reaguj.Component) jak opisano Here

A odnośnie drugiego pytania

właściwości klasy poza

wierzę, ponieważ wykorzystuje JSX i JSX jest obsługiwany przez Babel i ES6 prawie na pewno nie składnia okładki do definiowania zmiennych klasowych. Możesz przeczytać więcej: Here

Answer 2

Jaka jest różnica między dwiema następującymi metodami?

Pierwszą jest metoda badań (this.__proto__.methodName1), który nie jest związany z this kontekstu i ważne w ES6. Drugi to metoda instancji (this.methodName1), która jest powiązana z kontekstem this i a part of a proposal.

PropTypes jest poza klasą. Ale dlaczego?

Ponieważ pola klasy nie są obsługiwane w ES6. Ponieważ przykład wykorzystuje JSX i ma być zbudowany z Babel w jakikolwiek sposób, sensowne jest użycie funkcji ES.next i pola static propTypes = ....