斩钉截彻！React 受控和非受控组件揭秘：掌控 Form Input 的奥义

前端

2023-01-29 21:23:49

受控与非受控组件：揭开 React 中的谜团

作为一名经验丰富的 React 开发者，我经常遇到小伙伴们对受控和非受控组件感到困惑，这导致他们的组件封装逻辑一团糟。为了彻底消除这些疑虑，我将深入探讨这两个概念，并提供一些实用技巧，帮助你做出明智的决策。

受控组件

想象一下，你是一个控制狂的父母，时刻掌控着孩子的每一个动作。在 React 中，受控组件类似于这样的父母，它们的状态由父组件管理 。这使得父组件可以通过 props 传递数据给子组件，并通过回调函数接收子组件的更新。

受控组件最适合需要实时更新父组件状态 的情况，比如表单输入。这样，父组件就可以始终保持最新状态，做出相应的响应。

非受控组件

与受控组件相反，非受控组件就像叛逆的青少年，它们自行管理自己的状态 。这使得它们非常适合不需要实时更新父组件状态的情况，比如展示数据。

重新定义受控和非受控组件

为了避免混乱，让我们重新定义这两个概念，以便在不同的情况下做出正确的选择：

使用受控组件的场景：
- 需要实时更新父组件状态
- 需要对子组件状态进行严格控制
- 需要在父组件中处理子组件状态变化
使用非受控组件的场景：
- 不需要实时更新父组件状态
- 不需要对子组件状态进行严格控制
- 不需要在父组件中处理子组件状态变化

封装 useMergedValue Hook

为了进一步简化这两个概念的处理，我封装了一个名为 useMergedValue 的自定义 Hook。这个 Hook 就像一个睿智的中间人，根据传入的参数自动判断使用受控还是非受控组件 ，并提供一个统一的 API 来操作组件状态。

import { useMergedValue } from 'use-merged-value';

const MyComponent = () => {
  const [value, setValue] = useMergedValue(initialValue);

  // 受控组件示例
  if (props.isControlled) {
    setValue(props.value, false); // 第二个参数表示不触发 onValueChange 回调
  }

  // 非受控组件示例
  else {
    const onChange = (event) => {
      setValue(event.target.value);
    };

    return <input value={value} onChange={onChange} />;
  }
};

常见问题解答

什么是受控组件？
受控组件是指其状态由父组件管理的组件。
什么是非受控组件？
非受控组件是指其状态由组件自身管理的组件。
何时使用受控组件？
当需要实时更新父组件状态或严格控制子组件状态时，应使用受控组件。
何时使用非受控组件？
当不需要实时更新父组件状态或不需要严格控制子组件状态时，应使用非受控组件。
如何封装受控和非受控组件？
可以使用 useMergedValue Hook 来封装受控和非受控组件，它会根据传入的参数自动判断并提供一个统一的 API。