React中refs持久化

1,348 阅读1分钟

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

  1. 字符串模式 :废弃不建议使用
  2. 回调函数
  3. React.createRef() :React16.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示例