React学习05_ref

1. 转发refs react当中提供了一个ref的数据，表示当前组件的真正实例的引用(不能在无状态组件当中来进行使用 因为无状态组件没有实例)
2. 有三种方式 进行 ref的使用
   1. 字符串的方式
   2. 回调函数,就是在dom节点上挂载函数，入参形参
   3. React.createRef()
3. 官方建议我们 不要过度使用 refs 需要优先考虑state
4. 当给 HTML 元素添加 ref 属性时，ref 回调接收了底层的 DOM 元素作为参数。
5. 当给组件添加 ref 属性时，ref 回调接收当前组件实例作为参数。
6. 当组件卸载的时候，会传入null

<div id="reactDom"></div>
<script type="text/babel">
    class Com extends React.Component {
        constructor(props){
            super(props)
            this.myRef = React.createRef();
        }
        fun = () => {
            // console.log(this.refs.demoInput.value)
            console.log(this.myRef.current.value)
        }
        render() {
            return (
                <div>我是组件
                    {/*<input type="text" ref="demoInput" placeholder="请输入"/>
                    <button onClick={this.fun}>点我得到输入框的值</button>*/}
                    {/*<input type="text" ref={(input)=>{this.textinput = input}} placeholder="请输入"/>
                    <button onClick={this.fun}>点我得到输入框的值</button>*/}

                    <input type="text" ref={this.myRef} placeholder="请输入"/>
                    <button onClick={this.fun}>点我得到输入框的值</button>
                </div>
            )
        }
    }
    ReactDOM.render(<Com />, document.getElementById("reactDom"))
</script>