React中refs持久化

根据使用React的版本，选择合适的方法。

1. 字符串模式 ：废弃不建议使用
2. 回调函数，React版本 < 16.3
3. React.createRef() ：React版本 >= 16.3

回调函数

特点

• 可以优雅在组件销毁时回收变量。每次组件重新渲染的时候，行内函数都会执行两次，第一次的ele的值为空，第二次才为真正的DOM对象，因为在每次渲染中React都会 创建一个新的函数实例；
• 很好的支持静态类型检测；
• 针对数组遍历时可以直接转换为对应的数组， CodePen示例；
• 可以将父组件的ref 传入 孙组件。

【持久化方法】 因为存在回收变量的特点，会导致有些时刻ref会变成null，要想在初始化的时候讲ref持久化下来，可以通过将 ref 的回调函数定义成类的静态函数的方式解决。

回调函数 CodePen示例

createRef

React V16版本新增一个API：React.createRef(); 通过这个API，我们可以先创建一个ref变量，然后再将这个变量赋值给组件声明中ref属性就好了。

不同在于，需要通过 this.textInput.current，即真实的DOM是通过current属性来引用的。

CodePen示例