跟着设计哲学走:React数据绑定和获取,别闯红灯

一、传统方式存取数据react实现：

<div key="123"
            parent={this}
            viewdState={StateCode.MainBoxItem}
            data-view-state={StateCode.MainBoxItem}
            onClick={this.handleItemShow}
          >

编译以后通过谷歌react插件查看结果：

编译以后浏览器结果:

<div data-view-state="MainBoxItem" data-reactid=".0.0.0.0.2.$123">1\main  page.click me</div>

怎么所有非data-开头的属性都没有了？是的，这是react的潜规则，另外还有一条就是就是会自动添加data-reactid属性。

注意到图片中我标注了两处，原因？比较传进去的对象，就是tagName的区别，一个已经是原生的dom标记div，一个是react的自定义dom。编译器走到这里已经开始有区别了：

1）原生dom是废除一切除data-开始的属性。就算你传react对象给原生dom做属性，也会被当普通dom处理，就是说你传的react对象在原生dom百分百的是失效的

2）自定react标签是会被编译的，你传的参数都是被放在this.props里面。 

要怎么得到传的data-属性？

console.log(event.nativeEvent.target.getAttribute("data-view-state"));

结论：很复杂

二、react自定义组件方式:

看之前要充分理解js的一句经典：一切都是对象

1、子组件:

let DivItem = React.createClass({
  propTypes: {
    onClickMeItem: React.PropTypes.func,
    parent: React.PropTypes.node,
  },
  getDefaultProps() {
    return {
      onClickMeItem: null,
      parent: null,
    };
  },
  onClickMeItemInner:function(){
    console.log(this.props.parent);//子组件可以获取初始化的时候传过来的parent属性，并且是父对象哦
    //子组件可以获取初始化的时候传过来的onClickMeItem属性对应的函数对象handleItem2Show.
    //在标记<DivItem onClickMeItem=上这样申明是不是看起来是自定义事件呢
    this.props.onClickMeItem(this);
  },
  render:function(){
    return (
      <div onClick={this.onClickMeItemInner}>Click me!</div>
    );
  },
});

2、父组件中

constructor(props, context) {
    super(props, context);
//下面这句有没有对下面“@特别的玩意”很重要
    this.handleItem2Show= this.handleItem2Show.bind(this);

  }
..................
  handleItem2Show(ev) {
    console.log(ev);//我打印了子组件传过来的值,就是子组件自己
    console.log(ev.props.parent);//我打印了子组件上一个对自身的引用，就是打印自己啦
    //这里打印的是谁呢？handleItem2Show方法虽然在子组件调用执行的？
    // 两种可能：如果你没在父组件中某处(一般构造函数中)调用this.handleItemShow = this.handleItemShow.bind(this);
    //那么打印的是调用者本身，就是谁在调用这个方法就是谁了
    //另外就是你绑定了this，就是你你绑定到谁就是谁的
    console.log(this);//@特别的玩意
  }         
.................
<DivItem parent={this}
                   viewdState={StateCode.MainBoxItem}
                   onClickMeItem={this.handleItem2Show}
          />

没有绑定作用域打印结果：

二、结论：跟着设计哲学走，它就是你的上帝。