Menu
I found there is two way to declare state in class component like below
class App extends Component { constructor(props) { super(props); this.state = { name: 'John' } } render() { return <div>{this.state.name}</div> } } and
class App extends Component { state = { name: 'John' } render() { return <div>{this.state.name}</div> } } What is the difference between these two?
870
The constructor and getInitialState both in React are used to initialize state, but they can't be used interchangeably. The difference between these two is we should initialize state in the constructor when we are using ES6 classes and define the getInitialState method when we are using React. createClass (ES5 syntax).
To update our state, we use this. setState() and pass in an object. This object will get merged with the current state. When the state has been updated, our component re-renders automatically.
You can also use state in React function components (without a constructor), but using higher-order components or render prop components.
When the component class is created, the constructor is the first method called, so it's the right place to initialize everything – state included. The class instance has already been created in memory, so you can use this to set properties on it. This is the one place where it is acceptable to have this.
So the difference between constructor and getInitialState is the difference between ES6 and ES5 itself. We use getInitialState with React.createClass and constructor is used with React.Component. Both the above syntax to initialize state is equivalent.
The constructor is no different in React. This can connect event handlers to the component and/or initialize the component’s local state. Before the component is mounted, the constructor () function is shot, and, like most things in React, it has a few rules that you can follow when using them.
React uses an observable object as the state that observes what changes are made to the state and helps the component behave accordingly. For example, if we update the state of any component like the following the webpage will not re-render itself because React State will not be able to detect the changes made.
setState() schedules an update to a component’s state object. When state changes, the component responds by re-rendering.
They are roughly equivalent. The significant difference is that the initializer in the second example is executed before constructor.
The second approach uses class fields proposal.
It is not a part of ECMAScript standard yet so you need to set up transpiler properly to use the second approach.
UPD Take a look at Babel output to better understand how public instance fields work.
196
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
