Make render function of WrapStory pure

The render function of a React component has to be pure. But WrapStory render function called storyFn. Which could be not pure. Because it could take data from anywhere and also may render other components. Like the case in #60

This fixes #60

src/KnobManager.js

@@ -43,9 +43,11 @@ export default class KnobManager {
     if (!knobStore) {
       knobStore = this.knobStoreMap[key] = new KnobStore();
     }
-    this.knobStore = knobStore;
 
-    const props = { context, storyFn, channel, knobStore };
+    this.knobStore = knobStore;
+    knobStore.markAllUnused();
+    const initialContent = storyFn(context);
+    const props = { context, storyFn, channel, knobStore, initialContent };
     return (<WrapStory {...props} />);
   }
 

src/components/WrapStory.js

@@ -7,7 +7,7 @@ export default class WrapStory extends React.Component {
     this.resetKnobs = this.resetKnobs.bind(this);
     this.setPaneKnobs = this.setPaneKnobs.bind(this);
     this._knobsAreReset = false;
-    this.state = {};
+    this.state = { storyContent: this.props.initialContent };
   }
 
   componentDidMount() {
@@ -39,7 +39,8 @@ export default class WrapStory extends React.Component {
     // Update the related knob and it's value.
     const knobOptions = knobStore.get(name);
     knobOptions.value = value;
-    this.forceUpdate();
+    knobStore.markAllUnused();
+    this.setState({ storyContent: this.props.storyFn(this.props.context) });
   }
 
   resetKnobs() {
@@ -50,9 +51,7 @@ export default class WrapStory extends React.Component {
   }
 
   render() {
-    const { storyFn, context, knobStore } = this.props;
-    knobStore.markAllUnused();
-    return storyFn(context);
+    return this.state.storyContent;
   }
 }
 
@@ -61,4 +60,5 @@ WrapStory.propTypes = {
   storyFn: React.PropTypes.func,
   channel: React.PropTypes.object,
   knobStore: React.PropTypes.object,
+  initialContent: React.PropTypes.object,
 };