Reagent Design Method

Question

I read the React Docs regarding the constructor method and what it can use to set the state and binding function, but is it really necessary in most cases?

What is the difference between execution

export default class MyClass extends Component { constructor(props) { super(props); this.state = { foo: 'bar', }; this.member = 'member'; this.someFunction = this.anotherFunction(num); } anotherFunction = (num) => num * 2; render() { // render jsx here } } 

and just putting everything outside the constructor like

 export default class MyClass extends Component { state = { foo: 'bar', }; member = 'member'; someFunction = this.anotherFunction(num); anotherFunction = (num) => num * 2; render() { // render jsx here } } 

Is one option preferable to the other and are there any performance issues I should be aware of? This has distorted me a little, and I cannot find a concrete answer there.

Answer 1

Your two examples are functionally identical, but the main thing is that the assignment of objects outside the class methods, but inside the class body, for example, you have everything except render and constructor , is not standard ES6, and will only work through Babylon. This syntax is the proposed syntax for class properties .