React之Refs详解，深入理解Refs用法和原理

2023-09-09 22:26:12

好的，我来为你撰写一篇专业的React Refs技术文章，内容包含SEO优化、文章标题、正文以及关键词。

在介绍Refs之前，我们先来了解两个概念：受控组件和不受控组件。

在HTML中，表单元素（如input、textarea、select）之类的表单元素通常可以自己维护state，并根据用户的输入进行更新。而在React中，可变状态（mutable state）通常保存到组件的state对象中。因此，如果我们需要在React组件中访问表单元素的state，就需要使用受控组件。

受控组件是指由React组件控制其值的表单元素。受控组件的state存储在组件的state对象中，当用户更改受控组件的值时，React会更新组件的state，从而更新受控组件的值。

不受控组件是指不由React组件控制其值的表单元素。不受控组件的state存储在组件的DOM元素中，当用户更改不受控组件的值时，React并不会更新组件的state，也不会更新不受控组件的值。

Refs的原理和用法

Refs是一种特殊类型的React属性，它允许我们在React组件中直接访问DOM元素或子组件。Refs可以用于各种场景，例如：

访问DOM元素，以便我们可以直接对其进行操作。
访问子组件，以便我们可以直接调用其方法或属性。
创建受控组件。

要使用Refs，我们需要在组件的render()方法中使用React.createRef()方法创建一个ref对象，然后将ref对象传递给需要访问的DOM元素或子组件。例如：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.inputRef = React.createRef();
  }

  render() {
    return (
      <div>
        <input type="text" ref={this.inputRef} />
        <button onClick={() => {
          console.log(this.inputRef.current.value);
        }}>
          获取输入值
        </button>
      </div>
    );
  }
}