刚开始学习react，也不知道是运气好还是运气不好，一开始挑了vue作为主要的框架vue的操作还是算比较简单的在三大框架中（拿来即用）。而react相对来说会比较复杂一点涉及到的js原理性的东西也比较多包括es6等等。

从vue到react会感觉有很多东西感觉比较新没有见过比如每个事件要bind(this)将定义的react对象绑定到事件上，不然默认this是指向点击的元素而获取不到constructor的state中的数据。

和vue一样react也有ref获取dom元素。

import React, {Component} from 'react';

class App extends Component{
  constructor () {
    super()
    this.state = {
      inputValue: ''
    }
  }
  InputChange (event) {
    // this.setState({//这是没有用ref
    //   inputValue: event.target.value
    // })
    this.setState({//这是用ref获取dom元素
      inputValue: this.input.value
    },() => {
      console.log('setState函数执行完了才执行（页面更新口才获取dom要在这里）')
    })
  }
  render () {
    return (
      <div className="App">
        React App
        <input 
          value={this.state.inputValue} 
          onChange={this.InputChange.bind(this)}
          ref={(n) => {//传入的n为这个input的dom元素
            this.input = n//这里的this指向这个input标签
          }}
        />
      </div>
    );
  }
}

export default App;

ref中可以传入一个函数也可以传入一个字符串。
这里ref中的函数传入的参数是这个对应的dom元素，执行的操作是将这个dom绑定到给这个this.input上，那么InputChange事件中就可以直接通过this.input来获取这个dom。

这里要注意一下：ref如果要获取数据更新后的dom要在setState中传入的第二个函数中，因为setState是异步方法。
学习了react两天了，对this的指向有了更新的认识包括bind，call，apply这几个方法的作用。加油！！！

#12/13
react的ref也可以传入字符串这样的方式就类似于vue的ref，这样父组件就可以直接通过ref拿到子组件的实时信息。

import ItemTest from './components/item/item'

<ItemTest 
          ref="item"
          name={234567}
          handleClick={res => {
            console.log(this)
          }}  
        />

父组件通过this.ref就能拿到子组件的状态信息了