本文共 2189 字，大约阅读时间需要 7 分钟。

React框架提供了三种给ref赋值的方式，可以根据具体需求选择合适的方法。在实际开发中，ref的使用需要谨慎，因为它会对React的更新机制产生影响。以下将从不同的方式入手，讲解其使用方法和注意事项。

ref的三种书写方式

1. 字符串形式（简单，但可能被废弃）

这种方式是最初使用ref的方式，通过给元素或者组件的ref属性直接赋值字符串。示例代码如下：

class Demo extends React.Component {  render() {    return (      
   
        
            
    显示左侧内容        
          
   
    );  }}

注意事项：

• UIScreen’ss ref的字符串形式虽然简单，但存在问题：
  • 在大型应用中会导致内存泄漏和性能问题
  • 在新版本React中可能会移除这种方式
• 推荐在简单的项目或不频繁更新的组件中使用

2. 回调形式（开发者常用的方式）

回调形式通过函数作为ref的值，可以灵活地操作 DOM 节点。这种方式在 refs 进行 DOM 操作时更为常用。示例代码如下：

class Demo extends React.Component {  showData = () => {    const { left } = this;    alert(left.value);  };  showData2 = () => {    const { right } = this;    console.log(this);    alert(right.value);  };  render() {    return (      
   
        
     {            this.left = c;            console.log('@', c);          }}           type="text"           placeholder="点击右侧按钮弹出该框的内容"        />        
    点我提示左侧输入框内容        
     {            this.right = c;          }}           onBlur={this.showData2}           type="text"           placeholder="失去焦点提示该框的内容"        />      
   
    );  }}

小问题：

• 内联函数的调用问题：
  • 在状态更新时，内联函数可能会被多次调用
  • 第一次调用时，参数为 null（用于清空状态）
  • 第二次调用时，参数为所绑定的DOM元素

解决方法：

• 使用类方法（闭包函数）绑定 ref 函数，避免多次调用
• 示例代码如下：

class Demo extends React.Component {  saveInput(c) {    this.left = c;    console.log('@', c);  }  render() {    return (      
   
        
          
   
    );  }}

3. createRef形式（官方推荐）

createRef 方法是 React 推荐的方式，创建一个专门的 ref 容器。每个容器只能容纳一个 ref 节点。示例代码如下：

class Demo extends React.Component {  myRef = React.createRef();  showData = () => {    alert(this.myRef.current.value);  };  render() {    return (      
   
        
          
   
    );  }}

注意事项：

• createRef 的限制：
  • 每个容器只能存储一个 ref 节点
  • 如果需要操作多个 ref 节点，需要分别创建多个容器
• 在多数情况下，createRef 是最佳选择

ref 的使用原则

class Demo extends React.Component {  showData2 = (event) => {    alert(event.target.value);  };  render() {    return (      
   
        
          
   
    );  }}

2. ** refs 的绑定需要谨慎：**
   • 如果 ref 的使用导致多次更新，可能会影响 React 的状态机
   • 建议通过类方法绑定函数，避免内联函数带来的问题

总结

ref 的三种形式各有优缺点，建议根据项目需求选择合适的方式。在使用 refs 的过程中，应注意减少不必要的操作，遵循 React 的最佳实践。此外， Sevilla.js 函数允许开发者通过回调或 createRef 的方式灵活管理 DOM 节点，确保代码高效且易于维护。

转载地址：http://mcxpz.baihongyu.com/