react中受控组件与非受控组件

受控组件与非受控组件

受控组件:

其值由 React 控制的组件,通常使用 state 来控制和修改组件的值。

例如受控的 组件:

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

  handleChange = (event) => {
    this.setState({value: event.target.value});  
  }

  render() {
    return (
      <input 
        value={this.state.value} 
        onChange={this.handleChange} 
      />
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

输入的值通过状态state来控制,onChange 也会更新状态,所以组件受 React 的控制。

非受控组件:

其值未由 React 管理和控制的组件,通常使用 refs 来访问 DOM 元素获取值。

例如非受控的 :

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

  handleSubmit = () => {
    const value = this.input.current.value;
  }

  render() {
    return (
      <input
        type="text"
        ref={this.input} 
      />
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

输入的值未绑定到 state,需要手动通过 ref 读取,所以不是由 React 控制的。

ref的使用

在React中,ref被用来获取组件或者DOM元素的引用。常见的使用方式有以下几种:

1. 创建ref

使用React.createRef()创建ref:

const myRef = React.createRef();
1

2. 挂载ref到组件/元素

通过ref属性将ref挂载到组件/元素上:

<input ref={myRef} />

<MyComponent ref={myRef} />
1
2
3

3. 访问ref

通过ref的current属性访问到对应的组件或DOM元素:

const element = myRef.current;
element.focus(); // 对应的DOM元素
1
2

当ref挂载完成后,ref.current会指向对应的组件或DOM元素。

4. 在类组件中的使用

在类组件中可以在构造函数中创建ref,并通过this访问:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef(); 
  }
  
  render() {
    return <div ref={this.myRef} />;
  }
  
  componentDidMount() {
    const node = this.myRef.current;
  }  
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

5. 在函数组件中使用

在函数组件中可以通过useRef钩子创建和访问:

function MyComponent() {
  const myRef = useRef();
  
  useEffect(() => {
    const node = myRef.current;
  }) 
  
  return <div ref={myRef} />;
}
1
2
3
4
5
6
7
8
9

注意
在 React 中使用 ref 需要注意以下几点:

1. 避免过度使用 ref

不要在组件中大面积使用 ref,组件应该越“无状态”越好。ref 主要适用于必须访问 DOM 元素的特殊场景。

2. 不要在函数组件中暴露 ref

函数组件没有实例,它的 ref 会在每次渲染时发生变化,可能导致奇怪的 bug。

3. ref 不会自动绑定

当组件重新渲染时,ref 不会自动变化,需要在组件加载和卸载时手动更新。

4. 将 ref 传递给 DOM 元素时要注意泄露风险

如果组件被卸载但其 ref 仍在使用,会导致内存泄露。可以在组件卸载时手动将 ref 的 current 属性置为 null。

5. 避免在渲染期间设置 ref

不要在函数组件主体或 class 组件 render 方法中设置 ref,这可能导致 ref 不一致。应在加载后才设置 ref。

6. 将 ref 回调与 useEffect 配合使用。可以在 useEffect 中设置或重置 ref,以避免上述问题。

7. 在严格模式下使用 ref 会抛出警告,需要用 React.forwardRef 处理。