I've been digging into React's codebase and I discovered that when you write class App extends React.Component
, you are actually extending an object created by the following function:
function Component (props, context, updater) {
this.props = props;
this.context = context;
this.refs = {};
// We initialize the default updater but the real one gets injected by the
// renderer.
this.updater = updater || ReactNoopUpdateQueue ;
}
Component.prototype.isReactComponent = {};
Component.prototype.setState = function(partialState, callback) {
this.updater.enqueueSetState(this, partialState, callback, 'setState')
}
Component.prototype.forceUpdate = function(callback) {
this.updater.enqueueForceUpdate(this, callback, 'forceUpdate');
}
What is the advantage of creating classes this way as opposed to just writing an ES6 class?
class
syntax without having to preprocess the code. It produces the same result as usingclass
.class
will be converted to a function