ES6 code styles best practices

匿名 (未验证) 提交于 2019-12-03 00:50:01

问题:

Recently I've started to learn ReactJS and consequently - ES6. I'm quite familiar with ES5, but some things are not that clear for me.

Example 1: Methods syntax

What is the difference between the following two methods?

export class InvoiceForm extends React.Component {     methodName1() {     }      methodName2 = () => {      }; } 

Example 2: Class properties outside

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

propTypes is outside the class. But why? I came from python and as for me, the following is more correct

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

回答1:

What is the difference between the following two methods?

 methodName1() {   } 

above is a normal function and this keyword in this function refers to the context of the function itself.

So if you try to access React class Properties/functions like this.setState you will get an error (if you haven't used binding anywhere for methodName1 like :

this.methodName1 = this.methondName1.bind(this) prefarbaly you want to do it inside constructor method.

If you want to learn more about this binding you can see this Article

However In the second methodName2 syntax, function is written using Arrow function syntax.

 methodName2 = () => {     }; 

An arrow function does not have its own this , arguments, super or new.target. Hence this keyword inside this function will refer to the context of the React class (React.Component) as described Here

And regarding your second question

Class properties outside

I believe as it uses JSX , and JSX is supported by Babel and ES6 will almost certainly not cover syntax for defining class variables. You can read more it Here



回答2:

What is the difference between the following two methods?

The first one is prototype method (this.__proto__.methodName1) which is not bound to this context and valid in ES6. The second one is instance method (this.methodName1) which is bound to this context and a part of a proposal.

propTypes is outside the class. But why?

Because class fields aren't supported in ES6. Since the example uses JSX and is supposed to be built with Babel any way, it makes sense to use ES.next features and static propTypes = ... field.



标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!