React Bits项目解析：为什么推荐使用Refs替代findDOMNode方法

React Bits项目解析：为什么推荐使用Refs替代findDOMNode方法

react-bits ✨ React patterns, techniques, tips and tricks ✨ 项目地址: https://gitcode.com/gh_mirrors/re/react-bits

前言

在React开发中，我们经常需要直接访问DOM元素来执行某些操作，比如滚动到视图、聚焦输入框等。传统上，开发者可能会使用findDOMNode方法来实现这一需求。然而，React官方文档和社区最佳实践都推荐使用Refs来替代findDOMNode。本文将深入探讨这一技术选择的背后原因，并通过具体示例展示如何正确使用Refs。

findDOMNode的问题

findDOMNode是React提供的一个API，用于查找组件对应的DOM节点。虽然它能够工作，但存在几个显著问题：

1. 性能开销：每次调用都需要遍历组件树查找对应的DOM节点
2. 抽象泄漏：打破了组件的封装性，暴露了组件的内部实现细节
3. 不稳定性：当组件结构变化时，可能导致返回的DOM节点不符合预期
4. 函数组件不适用：无法在函数组件上使用

Refs的优势

相比之下，使用Refs有以下优势：

1. 直接引用：直接获取DOM节点引用，无需遍历查找
2. 明确性：明确知道引用的具体是哪个节点
3. 灵活性：可以在函数组件和类组件中使用
4. 性能更好：避免了不必要的DOM查询

代码重构示例

案例1：访问组件自身DOM节点

旧方式（使用findDOMNode）：

class MyComponent extends Component {
  componentDidMount() {
    findDOMNode(this).scrollIntoView();
  }

  render() {
    return <div />
  }
}

新方式（使用Refs）：

class MyComponent extends Component {
  componentDidMount() {
    this.node.scrollIntoView();
  }

  render() {
    return <div ref={node => this.node = node}/>
  }
}

案例2：访问子元素DOM节点

旧方式（使用字符串Refs）：

class MyComponent extends Component {
  componentDidMount() {
    findDOMNode(this.refs.something).scrollIntoView();
  }

  render() {
    return (
      <div>
        <div ref='something'/>
      </div>
    )
  }
}

新方式（使用回调Refs）：

class MyComponent extends Component {
  componentDidMount() {
    this.something.scrollIntoView();
  }

  render() {
    return (
      <div>
        <div ref={node => this.something = node}/>
      </div>
    )
  }
}

案例3：访问子组件内部的DOM节点

旧方式（通过子组件Ref）：

class Field extends Component {
  render() {
    return <input type='text'/>
  }
}

class MyComponent extends Component {
  componentDidMount() {
    findDOMNode(this.refs.myInput).focus();
  }

  render() {
    return (
      <div>
        Hello,
        <Field ref='myInput'/>
      </div>
    )
  }
}

新方式（通过props传递Ref）：

class Field extends Component {
  render() {
    return (
      <input type='text' ref={this.props.inputRef}/>
    )
  }
}

class MyComponent extends Component {
  componentDidMount() {
    this.inputNode.focus();
  }

  render() {
    return (
      <div>
        Hello,
        <Field inputRef={node => this.inputNode = node}/>
      </div>
    )
  }
}

最佳实践建议

1. 优先使用回调Refs：虽然字符串Refs仍然可用，但已被标记为遗留API
2. 函数组件中使用useRef：对于函数组件，应使用React Hooks中的useRef
3. 避免过度使用Refs：只在真正需要直接操作DOM时使用
4. 考虑forwardRef：当需要向父组件暴露子组件的DOM节点时，使用React.forwardRef

总结

React Bits项目中强调使用Refs替代findDOMNode的建议，反映了React社区对代码质量和性能的持续追求。通过本文的示例和分析，我们可以看到使用Refs不仅使代码更加清晰和可维护，还能避免潜在的性能问题和抽象泄漏。作为React开发者，我们应该遵循这一最佳实践，在需要直接访问DOM时优先考虑使用Refs。

react-bits ✨ React patterns, techniques, tips and tricks ✨ 项目地址: https://gitcode.com/gh_mirrors/re/react-bits