Merge pull request #111 from developit/component-construction-fixes

Support multiple ways to construct components

CHANGELOG.md

@@ -25,6 +25,9 @@
 4. `setState` no longer modifies `this.state` synchronously
 5. Falsy attributes values are no longer removed from the DOM. For some attributes (e.g. `spellcheck`)
    the values `false` and `''` have different meaning so being able to render `false` is important
+8. The Component constructor no longer initializes state to an empty object. If state has not been
+   previously set, it will be set to an empty object the first time the component is rendered, after
+   the constructor has been called
 
 ### Minor changes
 

src/component.js

@@ -13,9 +13,9 @@ export function Component(props, context) {
 	this.props = props;
 	this.context = context;
 	// if (this.state==null) this.state = {};
-	this.state = {};
-	this._dirty = true;
-	this._renderCallbacks = []; // Only class components
+	// this.state = {};
+	// this._dirty = true;
+	// this._renderCallbacks = []; // Only class components
 
 	// Other properties that Component will have set later,
 	// shown here as commented out for quick reference
@@ -87,6 +87,17 @@ Component.prototype.forceUpdate = function(callback) {
 	if (callback!=null) callback();
 };
 
+/**
+ * Accepts `props` and `state`, and returns a new Virtual DOM tree to build.
+ * Virtual DOM is generally constructed via [JSX](http://jasonformat.com/wtf-is-jsx).
+ * @param {object} props Props (eg: JSX attributes) received from parent
+ * element/component
+ * @param {object} state The component's current state
+ * @param {object} context Context object, as returned by the nearest
+ * ancestor's `getChildContext()`
+ * @returns {import('./index').ComponentChildren | void}
+ */
+Component.prototype.render = function () {};
 
 /**
  * The render queue

src/diff/index.js

@@ -224,6 +224,8 @@ export function diff(dom, parent, newTree, oldTree, context, isSvg, append, exce
 				c.props = newTree.props;
 				if (!c.state) c.state = {};
 				c.context = context;
+				c._dirty = true;
+				c._renderCallbacks = [];
 			}
 
 			c._vnode = newTree;