Call setState on React components once per dispatch

The current ReactMixin implementation calls `reactor.observe`
separately for each entry in the response to a React component's
getDataBindings. If multiple pieces of bound data change in a single
dispatch, Nuclear will call setState on the component for each of them
and React will dutifully render each time. This means that the exact
behavior of your component is dependent on the order in which you
define your data bindings (aside from being bad for performance).

This patch switches to a single `reactor.observe` call that includes
all of the data bindings for the component.

Fixes optimizely#193

src/create-react-mixin.js

@@ -22,23 +22,22 @@ export default function(reactor) {
     },
 
     componentDidMount() {
-      this.__unwatchFns = []
-      each(this.getDataBindings(), (getter, key) => {
-        const unwatchFn = reactor.observe(getter, (val) => {
-          this.setState({
-            [key]: val
-          })
-        })
+      const bindings = this.getDataBindings()
+      let keys = Object.keys(bindings)
+      const args = keys.map((k) => { return bindings[k] })
+      args.push((...vals) => { return vals })
 
-        this.__unwatchFns.push(unwatchFn)
+      this.__unwatchFn = reactor.observe(args, (vals) => {
+        let state = {}
+        each(vals, (val, i) => { state[keys[i]] = val })
+        this.setState(state)
       })
     },
 
     componentWillUnmount() {
-      while (this.__unwatchFns.length) {
-        this.__unwatchFns.shift()()
+      if (this.__unwatchFn) {
+        this.__unwatchFn()
       }
     },
   }
 }
-