React手册之ref革命

到目前为止react中ref有三种方式

1. 字符串
2. 回调函数
3. createRef()

1.字符串

dom节点上使用，通过this.refs[refName]来引用真实的dom节点

<input ref="ref" />

2.回调函数

React 支持给任意组件添加特殊属性。ref 属性接受一个回调函数，它在组件被加载或卸载时会立即执行。

1. 当给 HTML 元素添加 ref 属性时，ref 回调接收了底层的 DOM 元素作为参数
2. componentWillUnmount之后执行时callback接收到的参数是null
3. ref中的回调函数会在对应的普通组件（或元素）componentDidMount，ComponentDidUpdate之前，或者componentWillUnmount之后执行
4. 对比字符串这样的好处在使用方面会更加灵活，而且react在组件销毁时这也吧你定义的变量会被清理为null
5. 但是这还是有副作用的当你的组件更新时这个函数会执行两次，react会清除老的，创建新的

2.createRef()

6. 他是全局定义的，当你在contructor创建一个React.ctrateRef()

 constructor(props:any){
        super(props)
        this.state = {
            form:{}
        }
        this.homeTable = React.createRef()//刚创建的时候内部是的current={}
    }

他集合函数式的ref,也去掉了函数ref的副作用

参考文档