Q:

Save state on component object directly?

The react documentation recommends to store a components state in its "state" property. But it appears that it's also well possible to use the component object itself as the state.
For example, instead of doing:
{
    getInitialState:function(){
        return {firstname: this.props.firstname||"",lastname:this.props.lastname||""}
    },
    render:function(){
        return React.DOM.div({},"Hello, "+this.state.firstname+" "+this.state.lastname);
    }
}

I could do something like this:
{
    getInitialState:function(){
        this.constructor(this.props);
        return {};
    },
    constructor:function(props){
        this.firstname = props.firstname||"";
        this.lastname = props.lastname||"";
    },
    render:function(){
        return React.DOM.div({},"Hello, "+this.firstname+" "+this.lastname);
    }
}

To me this looks much cleaner. But I'm afraid that this could have any unexpected side effects that I'm unaware of.
Is this a bad idea? Will it have any disadvantages? Why do you think did the React devs even go for a "state" property? I mean, if it worked the way I'd like it worked by default, the state-property-pattern could still be used by everyone that prefers it, but those who don't like it wouldn't need to even have a "getInitialState" function.

A:

React is built on top of the idea that a component always reflects the components 'state'. 
When altering state with setState, React will rerender the parts that have been altered. 
Internally, a React component is a javascript object just as everything else. 
So of course you can alter properties directly, but this will not prompt react to rerender the component. Thus, your component will not always reflect the altered properties. 
Thus, even if it would work to alter properties directly, it's a bad design-pattern since it's harder to refactor to state if you ever need it. It also breaks the standard design-pattern of React, which will make it harder to read for other developers.

