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
}
Related
Here is my question: What is the difference between these two declarations:
Whats the matter if I declare it on top of my component and what if within it?
Thank you in advance.
Functions that are created inside class components are usually referred to as methods.
If your function doesn't depend on class instance properties state or props and is independent of the component you can define that function outside the class.
But if your function need access to the class state, prop or any other class methods, you'll need to define it within the class component so you can use this.state or this.props.
So, thumb rule would be that if you need any access of the class component instance i.e. this within your function, you will need to define the function inside the component.
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.
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'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.