React 中的 document.getElementById() 等价物是什么？

在 React 中，我们通常不直接操作 DOM 元素来改变页面的状态，而是通过改变组件的状态去渲染页面。因此，我们不再使用 document.getElementById() 这样的 DOM 操作方法。

那么在 React 中，有哪些等价物可以替代 document.getElementById() 的功能呢？以下是一些常见的替代方案：

1. 使用 refs

在 React 中，我们可以使用 refs 来访问一个组件的实例，然后通过它的实例方法来操作 DOM 元素。例如：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  handleClick() {
    this.myRef.current.style.background = 'red';
  }

  render() {
    return (
      <div ref={this.myRef}>
        <button onClick={() => this.handleClick()}>Click me</button>
      </div>
    );
  }
}

在这个示例中，我们使用 React.createRef() 创建了一个可以引用 DOM 节点的 myRef，然后在 render() 方法中将其传递给了 <div> 标签的 ref 属性。在 handleClick() 方法中，我们可以通过 this.myRef.current 来获取实际的 DOM 元素，然后设置其样式。

2. 使用事件处理器

在 React 中，我们可以使用事件处理器来监听 DOM 事件，然后在事件回调函数中更新组件的状态。例如：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      backgroundColor: 'white'
    };
  }

  handleClick() {
    this.setState({ backgroundColor: 'red' });
  }

  render() {
    return (
      <div style={{ backgroundColor: this.state.backgroundColor }}>
        <button onClick={() => this.handleClick()}>Click me</button>
      </div>
    );
  }
}

在这个示例中，我们在 <div> 标签中设置了样式，样式的背景颜色是通过组件的状态来控制的。在 handleClick() 方法中，我们通过调用 this.setState() 方法来更新状态，并让页面重新渲染。

3. 使用 React 的动画库

在 React 中，我们可以使用众多的动画库来操作 DOM 元素，例如 React Transition Group、React Spring 等。这些库可以方便地实现复杂的动画效果，而不需要直接操作 DOM 元素。例如：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      show: false
    };
  }

  handleClick() {
    this.setState({ show: !this.state.show });
  }

  render() {
    return (
      <div>
        <button onClick={() => this.handleClick()}>Toggle box</button>
        <Transition in={this.state.show} timeout={1000}>
          {state => (
            <div
              style={{
                backgroundColor: 'red',
                width: '100px',
                height: '100px',
                opacity: state === 'entered' ? 1 : 0
              }}
            />
          )}
        </Transition>
      </div>
    );
  }
}

在这个示例中，我们使用了 React Transition Group 来创建一个简单的过渡动画。在 render() 方法中，我们渲染了一个带有背景色、宽度、高度和不透明度的 <div> 标签，在 Transition 组件中设置了该标签的出现和消失效果。在 handleClick() 方法中，我们通过改变组件的状态来触发该过渡动画的出现和消失。

综上所述，React 中有多种等价物可以替代 document.getElementById()，我们可以根据需求选择合适的方案。