Is there a way to access new context api within constructor?
I want to get context in constructor function, but now i only get after componentDidMount.
demo: https://codesandbox.io/s/dank-wave-yy8uq
I try to add the second parameter to constructor function, i can get context in constructor.but I don't know if this is the right way？or is there another way?
demo: https://codesandbox.io/s/quizzical-sinoussi-ln7lg
Using the context as the second argument and passing it to super is the correct way.
constructor(props, context) {
super(props, context);
// ...
I totally agree with jagster answer. As well I would add that, if you do not use the props parameter in the constructor(props) and then pass it to super(props) it will also be undefined in the constructor.
Related
I am reading type definition of react in here. Inside the code, I found inside class Component {} (in line 396), there is constructor without body as below (line 435 ):
constructor(props: Readonly<P>);
Why there is no implementation of constructor inside a class. Can someone explain?
you are reading index.d.ts
its only typescript definition for javascript implementation.
read more here
Since React is what instantiates the class for you, the type definition is simply informing you of what would be passed to the constructor if you decided to provide one.
This is also useful because it instructs you how to call super(). If you were to create a constructor, you would need to pass the received props to super even if your class did not need them, e.g.
constructor(props) {
super(props);
// your constructor logic here
}
This sentence is supposed to explain why super(props) is needed:
"This is because it will allow us to call the constructor of the parent class and initialize itself in case our class extends any other class which has constructor itself."
Can anyone explain this in a way that makes sense? What does it mean for one class to extend another?
They're referring to the traditional OOP reason for calling super, which is to call the constructor of the parent class your current one is extending. Your class components will extend React's classes, such as Component or PureComponent.
If you're wondering about super(props)'s place in React specifically, check out the accepted answer in this post.
There's also posts explaining difference between super() and super(props) which you can Google around for.
P.S. Official React docs say to always use super(props) in a constructor.
I have a basic knowledge of JS and now exploring react. I know there are lots of answers to what is super(props) and when to use it in react.
But there is yet answers to HOW it works and WHY do we call super(props) in constructor in React?
first of all it's important to understand that you will only call super(props) in a component if you need to use the props inside a constructor for a particular reason, by making use of super(props) you're enabling access to your component's props inside of the constructor.
If you don't really need to use props there, you could just use super(), however, it's recommended to use super(props) to avoid inconsistencies and missleading behaviors.
The constructor is executed before components are mounted and sometimes you want to use them to set up some things like React's local state, or bind some handlers.
There are other references to this topic in SO that could help you clarify your doubts:
What is super(props) doing for my React component?
What's the difference between “super()” and “super(props)” in React when using es6 classes?
I'm wondering if the recommended way to define a react class component with typescript is using a void as state type:
class MyComponent extends React.Component<any, void> {
constructor(props) {
super(props);
// The typescript compiler won't allow this using void type
// this.state = {...}
[...]
}
Do you know a recommended or better way?
Note: the component must be a class because I will need the lifecycle methods
Its perfectly legal to use void as state type. I have not seen any "official" recommendations for stateless components based on classes, but (if this will make you feel safer) this approach is used by some not so small projects.
You can use {} instead of void but this will not protect you from assigning something to state.
It is also possible to specify never and it seems to give the same results as void.
I want to use function instance, not pure object, as state object in react. But I'm not sure if that's ok:
class Test extends Component {
constructor(props) {
super(props);
this.state = new Domain();
}
}
So long as typeof new Domain() == 'object' it'll be fine.
What you have to remember (and possibly account for) is that React won't know about it if the instance updates itself.
All changes to this.state have to go through the setState interface and the Domain function probably doesn't know that.
this.state = new Domain();
// this won't cause your component to re-render
this.state.update(10);
// and this is an anti-pattern
this.setState(this.state);
It's very difficult to listen for changes to an object and if your domain object has instance methods which modify its state, you might find it starts to get tough to keep it in sync with your component.
Yes that's ok.
There's no such thing as a pure or non-pure object in javascript (there are pure functions). There are different notations that can be used to create a javascript object though.
One of these is the 'Function constructor' which is the one you used in new Domain(), and another common one is the object literal notation {}.
React just expects an object and he does not care which notation you used to create it.