React 中妙不可言的 Ref 艺术，函数组件&类组件一一掌握

Ref：React中的引用

在React开发中，Ref 是一个非常有用的工具，它允许我们访问组件或DOM元素的引用，从而对其进行操作或获取数据。

在类组件中使用Ref

在类组件中，有两种获取Ref内容的方法：

• 回调函数： 在组件的构造函数中创建Ref对象，然后在render()方法中将其传递给组件元素。通过this.ref.current访问Ref内容。

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

  render() {
    return <input ref={this.myRef} />;
  }
}

• 属性代理： 在render()方法中使用forwardRef()函数将Ref对象传递给组件元素。在父组件中，使用ref属性将Ref对象传递给子组件。通过this.props.forwardedRef访问Ref内容。

const MyComponent = React.forwardRef((props, ref) => {
  return <input ref={ref} />;
});

在函数组件中使用Ref

在函数组件中，也有两种获取Ref内容的方法：

• useRef()钩子： 在组件函数中创建Ref对象，然后将其传递给组件元素。通过ref.current访问Ref内容。

function MyComponent() {
  const myRef = React.useRef();
  return <input ref={myRef} />;
}

• forwardRef()函数： 在组件函数中使用forwardRef()函数将Ref对象传递给组件元素。在父组件中，使用ref属性将Ref对象传递给子组件。通过props.ref访问Ref内容。

const MyComponent = React.forwardRef((props, ref) => {
  return <input ref={ref} />;
});

受控组件

受控组件 是指由父组件控制子组件状态的组件。通过Ref，我们可以创建受控组件，让父组件通过子组件的方法改变其状态。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: '' };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    this.setState({ value: e.target.value });
  }

  render() {
    return <input ref={this.myRef} value={this.state.value} onChange={this.handleChange} />;
  }
}

结语

Ref是一个强大的工具，可以增强我们在React应用程序中的控制和灵活性。通过理解Ref的用法，我们可以解锁更多的可能性，构建更加健壮和响应式的应用程序。

常见问题解答

1. 什么时候应该使用Ref？
   • 当需要访问组件或DOM元素的引用时，例如进行操作或获取数据。
2. 类组件和函数组件中Ref的使用有什么区别？
   • 类组件使用回调函数或属性代理，而函数组件使用useRef()钩子或forwardRef()函数。
3. 如何创建受控组件？
   • 通过Ref获取子组件的实例，并使用父组件的方法改变其状态。
4. Ref有什么其他用途？
   • 可以用于DOM焦点管理、滚动到特定元素、创建自定义动画等。
5. 使用Ref有哪些需要注意的地方？
   • 避免在不必要的情况下过度使用Ref，因为它会影响性能。总是确保释放不再需要的Ref，以防止内存泄漏。