揭秘React中的受控组件与非受控组件，打造灵敏交互界面

前端

2023-05-19 07:01:41

React 组件状态管理：受控组件与非受控组件指南

受控组件：让父级掌控一切

想象一下，你正准备建造一座新房子。你聘请了一名建筑师来设计蓝图，但你也想要实时了解工程的进展。因此，你决定亲自管理材料和施工进度。这种模式与受控组件在 React 中的工作方式非常相似。

在受控组件中，组件的状态由父组件管理。这就像建筑师控制着房屋的设计和施工进度一样。父组件通过 props 将状态值传递给子组件，而子组件则根据这些值渲染界面。

受控组件的优势：

集中管理： 父组件负责管理组件的状态，简化了状态共享和更新。
清晰的数据流： 数据从父组件流向子组件，保持了清晰的数据流。
易于表单验证： 父组件可以轻松验证子组件中的表单控件，确保用户输入的数据有效。

示例：

class ParentComponent extends React.Component {
  state = { value: '' };

  render() {
    return <ChildComponent value={this.state.value} onChange={(e) => this.setState({ value: e.target.value })} />;
  }
}

class ChildComponent extends React.Component {
  render() {
    return <input value={this.props.value} onChange={this.props.onChange} />;
  }
}

非受控组件：独立自主的组件

现在，想象一下一个不同的场景：你雇佣了一个经验丰富的承包商来建造你的房子。承包商会根据自己的专业知识和经验来管理施工进度，而你只需要偶尔查看进度。这种模式与 React 中的非受控组件类似。

在非受控组件中，组件的状态由组件自身管理。与受控组件不同，父组件不会传递 props 来控制子组件的状态。

非受控组件的优势：

代码简洁： 非受控组件不需要在父组件中管理状态，因此可以减少代码量。
性能更高： 由于父组件不需要不断更新状态，因此非受控组件的性能通常更高。

示例：

class InputComponent extends React.Component {
  state = { value: '' };

  render() {
    return <input value={this.state.value} onChange={(e) => this.setState({ value: e.target.value })} />;
  }
}

选择合适的组件类型

选择受控组件还是非受控组件取决于你的特定需求：