react 实现数据双向绑定

首先从没有使用mixin的例子引入

 

var BindingExample = React.createClass({
            getInitialState: function() {
                return {
                    text: ''
                }
            },
            handleChange: function(event) {
                this.setState({text: event.target.value})
            },
            render: function() {
                return <div>
                    <input type="text" placeholder="请输入内容" onChange={this.handleChange} />
                    <p>{this.state.text}</p>
                </div>
            }
        })
React.render(<BindingExample></BindingExample>, document.body);

 

 

这个例子大家都很熟悉，当input框发生改变的时候，去调用handleChange方法，然后通过setState重新render P标签中的数据

 

接下来引入使用mixin的一个例子，没有使用官方的方法

 

var BindingChange= {

            handleChange: function(key) {

                var that = this,
                    newState = {};

                return function(e) {

                    newState[key] = e.target.value;
                    that.setState(newState);

                }

            }

        }

        var BindingExample1 = React.createClass({

            mixins: [BindingChange],

            getInitialState: function() {
                return {
                    text: "",
                    comment: ""
                }
            },
            render: function() {
                return (
                    <div>
                         <input type="text" placeholder="请输入内容" onChange={this.handleChange('text').bind(this)} />
                                 <textarea onChange={this.handleChange('comment').bind(this)}></textarea>
                                     <p>{this.state.text}</p>
                                     <p>{this.state.comment}</p>
                    </div>
                );
            }

        })
        React.render(<BindingExample1 />,document.body);

来分析一下这个例子

 

首先看BindingExample中的render，仔细观察一下实际上和例子一没有什么区别，只是在onChange处理的函数上绑定了上下文，还在在函数里面传了一个值（key）

这个key和state中对应的key值要相同，如例子中input改变的时候是修改state中的"text"这个状态，所以传入"text"。

然后再看BindingExample中的mixins，把BindingChange引用了进来，在引用之后，BindingChange中的东西就会变成BindingExample的东西

所以onChange那里进行bind之后，BindingChange的this指针指向了BindingExample，而不是window。

 

接着看一下BindingChange。先定义了一个that来保存当前的this，接下里定义了一个对象

为什么要定义一个对象呢。

可以发现，React中setState要修改的状态名字不是一个字符串，也不能解析变量。如果假如onChange事件中传入的key为"text"，直接这样修改 setState({key:event.target.value}) 实际上并没有修改text的值，然是去修改了key的值，然而我们并没有在实际的代码中存在key这个状态，所以并不会发生改变。

所以在return的那个函数中newState[key] = e.target.value,这个时候key就可以解析成了text，并且进行了赋值，然后将该对象传入setState中，text这个状态得以改变。

当然，假如传入的是comment这个值，那么这个key实际上就是comment，然后改变的是comment的状态

 

读到这里大家可能都发现了，mixin做的就是把一些相同的东西抽离出来，就像这个onChange事件，如果没用mixin的话，可能就要写onChange1和onChange2。实际上就像方法的封装一下。当然也有不好的地方，就是查找这个方法的时候可能不会一下子找到。

 

最后引入官方的例子

 

var BindingExample2 = React.createClass({
    mixins: [React.addons.LinkedStateMixin],
    getInitialState: function() {
        return {
            text: "",
            comment: ""
        }
    },
    render: function() {
        return (
            <div>
                <input type="text" placeholder="请输入内容" valueLink={this.linkState('text')} />
                                 <textarea valueLink={this.linkState('comment')}></textarea>
                                 <p>{this.state.text}</p>
                                 <p>{this.state.comment}</p>
            </div>
        );
    }
 });
 React.render(<BindingExample2 />,document.body);

对比例子2，我们发现在mixin中使用了React.addons.LinkedStateMixin，这个就是官方封装好的自己的双向绑定的方法

 

再往下读下去发现onChange事件变成了valueLink，然后使用了方法linkState，而传入的值依旧是这个input想要改变的状态的名字。

 

我们来看一下官方的这个方法是怎么封装的

 

var ReactLink = _dereq_(75);
     var ReactStateSetters = _dereq_(94);

     var LinkedStateMixin = {
         linkState: function(key) {
             return new ReactLink(
                 this.state[key],
                 ReactStateSetters.createStateKeySetter(this, key)
             );
         }
     };

     module.exports = LinkedStateMixin;

这个就是方法封装的mixin的LinkedStateMixin方法

 

官方是这么解释的

ReactLink encapsulates a common pattern in which a component wants to modify a prop received from its parent.

ReactLink封装了一个需要从父级获取值并且修改的一个公有的模式。（实际上就是绑定上下文环境，然后函数的封装）

 

然后我们去查看ReactStateSetters.createStateKeySetter这个方法是这样写的

 

createStateKeySetter: function(component, key) {
  // Memoize the setters.
  var cache = component.__keySetters || (component.__keySetters = {});
  return cache[key] || (cache[key] = createStateKeySetter(component, key));
}

传入上下文环境，传入要修改的状态的名字。看到cache，大家也能明白这是缓存的意思，判断是否有这个状态，有的话直接复制，并返回。没有的话就创建一个对象，然后进入(cache[key] = createStateKeySetter(component, key))这个方法中

 

 

然后继续找到了createStateKeySetter，他是这个样子的

 

function createStateKeySetter(component, key) {
  var partialState = {};
  return function stateKeySetter(value) {
    partialState[key] = value;
    component.setState(partialState);
  };
}

继续传入上下文环境，传入要修改的状态的名字。然后往下读，是不是突然发现很熟悉，这个不就是和例子二中的handleChange是一模一样的。

 

 

此篇博文到此就结束了。