Comparison according part between React.createClass and React.Component

Question

All:

I am pretty new to React, I am wondering if anyone could give me a comparison between createClass and extends Component

The first question is why we need React.Component since we already have createClass?

Second, something specific is:

1. What does this.state looks like in extends Component mode: I try to use this.state in constructor(), but failed as undifined, does that mean I have to build this.state myself by giving it the whole state tree?

And one question for both modes:

If I want to use setState() with a complex object(which has nested data structure) how can I only update according part, for example, say the state is like:

State = {
    title: "",
    attrs: {
        size: {
            width:"100px",
            height: "100px"
        }
    }
}

How can I only update the height using setState()? Should I use it like

setState({
    attrs: {
        size: {
            height:"200px"
        }
    }
})

Thanks

Amid · Accepted Answer · 2016-04-01 19:11:21Z

1

There are plenty of answers on this topic up there: link, link

The state should be initialized in constructor, before you do so - its undefined:

public constructor(props, context)
{
    super(props, context)

    this.state = {
        Clients: [],
    };
}

You can always update just part of the state and then force update:
```
this.state.attrs.size.height = 200;
this.forceUpdate(); 
```
Or just update the state object and reassign it using setState again.

answered Apr 1, 2016 at 19:11

Amid

22.5k6 gold badges63 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Kuan Over a year ago

thanks, another question related to this is: when I tried the tutorial in facebook site, it seems that most cases still written with createClass(), I wonder which mode is recommended: the createClass or extends Component

Amid Over a year ago

My personal opinion is - extends - as it is the future of javascript.

Kuan Over a year ago

Thanks, BTW, what is that context means in constructor?

erichardson30 · Accepted Answer · 2016-04-01 19:00:40Z

1

React.createClass was the older way to define a react component. class did not really exist within javascript at the time so this was React's implementation of 'classes';

import React, {Component} from 'react';
class ReactComponent extends Component

is the newer way to do define a react component based on es2015 classes.

State should behave the same way no matter how you define the component.

Within the constructor you should be able to define this.state.

I would look into the Flux architecture and implement either Redux or AltJS to help with the data flow architecture.

In your state if you have an object :

q = {
  title: "Test",
  body : "Test123"
}

and want to update the title ... you have to do the following :

var x = this.state.q;
x.title = "New Title";
this.setState({ q: x });

You can not modify an object attribute in state. You have to update the attribute and setState with the entire new object.

answered Apr 1, 2016 at 19:00

erichardson30

5,0548 gold badges29 silver badges47 bronze badges

2 Comments

Kuan Over a year ago

thanks, another question related to this is: when I tried the tutorial in facebook site, it seems that most cases still written with createClass(), I wonder which mode is recommended: the createClass or extends Component

erichardson30 Over a year ago

@Kuan I would assume the facebook site still uses createClass because that doesn't rely on es2015. Not all browsers support es2015 yet so you have to use a transpiler like babel. Most "newer" examples use extends Component that I've seen. And it also depends on if you are wanting to use es2015 functionality in your JS code

Collectives™ on Stack Overflow

Comparison according part between React.createClass and React.Component

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related