掌握React核心概念：受控组件与非受控组件的深度解析与实战应用

在React的世界里，组件是构建用户界面的基本单元。而在这众多组件中，受控组件与非受控组件是两种非常核心的概念。它们不仅体现了React的哲学，也在实际开发中扮演着重要的角色。今天，我们就来深入探讨一下这两种组件的概念、区别以及实战应用。

受控组件

概念

受控组件是React中的一种常见组件模式。在这种模式下，组件的state是唯一的数据源。当用户输入数据时，比如在表单输入框中输入内容，React的state会被更新，从而反映用户输入的值。这意味着，组件的每个状态变化都可以被跟踪和管理。

实战应用

让我们通过一个例子来理解受控组件。假设我们正在创建一个用户注册表单，其中包含用户名和密码输入框。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

x
class RegistrationForm extends React.Component { constructor(props) { super(props); this.state = { username: '', password: '' }; }

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

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

handleSubmit = (event) => { event.preventDefault(); // 提交表单数据 }

render() { return ( 

<form onsubmit="{this.handleSubmit}"> <label>          用户名:          <input onchange="{this.handleUsernameChange}" type="text" value="{this.state.username}"/> </label> <label>          密码:          <input onchange="{this.handlePasswordChange}" type="password" value="{this.state.password}"/> </label> <button type="submit">注册</button> </form>

 ); }}

在这个例子中，<input> 元素是受控组件，因为它们的值由React的state驱动。每当用户输入时，都会调用相应的处理函数来更新state。

非受控组件

概念

与受控组件相反，非受控组件的值不受React的state控制。在这种情况下，你通常会使用ref来直接从DOM中获取表单元素的值。

实战应用

继续上面的例子，如果我们把用户名输入框改为非受控组件，代码如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

x
class RegistrationForm extends React.Component { constructor(props) { super(props); this.usernameRef = React.createRef(); }

handleSubmit = (event) => { event.preventDefault(); const username = this.usernameRef.current.value; // 提交表单数据 }

render() { return ( 

<form onsubmit="{this.handleSubmit}"> <label>          用户名:          <input ref="{this.usernameRef}" type="text"/> </label>        {/<em> 其他表单元素 </em>/}        <button type="submit">注册</button> </form>

 ); }}

在这个例子中，用户名输入框是一个非受控组件。我们通过ref直接从DOM中读取其值，而不是通过state。

受控组件 vs 非受控组件

区别

  • 状态管理：受控组件的值由React的state管理，而非受控组件的值通常通过ref直接从DOM中获取。
  • 数据流：受控组件的数据流更清晰，所有的数据变更都经过React的state，而非受控组件的数据流则更加直接和简单。
  • 使用场景：受控组件更适合复杂或高度动态的表单，非受控组件则更适合简单的表单或当你不想管理state时。

选择标准

选择受控组件还是非受控组件，应该基于你的应用场景和需求。如果需要处理复杂表单验证、动态表单字段或多个输入之间的同步，受控组件通常是更好的选择。而对于简单的表单，非受控组件可能会更加简洁和高效。

结语

掌握受控组件和非受控组件是React开发中的关键。通过合理地选择和使用这两种组件，你可以构建出更加高效、可维护和用户体验优秀的应用。希望这篇文章能帮助你更好地理解和应用这两种核心的React概念。