React中父组件如何获取子组件自管理的状态完成表单提交

现有一个简单示例场景：包含Form父组件与多个Input子组件，每个Input组件通过useState钩子初始化并管理自身的值状态。

和常规表单需求一致，需要将所有表单数据提交到后端进行处理，但目前无法从各个Input子组件中获取其内部维护的值状态。

// app.jsx
import Form from "./Form";

export default function App() {
  return <Form />;
}

// Form.jsx
import React from "react";
import Input from "./Input";

const handleSubmit = (e) => {
  e.preventDefault();
  console.log("Wait, how do I retreive values from Children Inputs?");
};

const Form = () => {
  console.log("Form render");

  return (
    <form onSubmit={handleSubmit}>
      Sample Form
      <Input initial="username" name="user" />
      <Input initial="email" name="email" />
      <button type="submit">Submit</button>
    </form>
  );
};

export default Form;

// Input.jsx
import React from "react";
import useInputValue from "./useInputValue";

const Input = ({ name, initial }) => {
  const inputState = useInputValue(initial);

  console.log(`${name}'s value: ${inputState.value}`);
  return <input {...inputState} />;
};

export default Input;

最容易想到的解决方案是将Input的状态提升至Form组件，统一存放在名为values的对象中管理，但该方案下，每次Input值变化都会触发Form组件重渲染，连带所有Input子组件一同重渲染。

这是不必要的副作用：随着Form组件规模增大，单个输入变化就重渲染表单内所有输入组件的性能开销会越来越高。因此希望保留每个输入组件自管理状态的设计，实现单个输入变化时，不会连带父组件和其他输入组件一同重渲染。

在每个子组件自行管理内部状态的前提下，父组件是否可以访问这些子组件的状态值，完成表单提交这类操作？

有观点提到这种考虑属于过早优化，我认可该观点，但需要说明：使用简单示例提问，是为了给当前更复杂的实际项目寻找可行方案。现有Web应用包含一个大型表单，目前所有状态都提升到表单层级，每次输入变化都会触发全表单重渲染，而实际上每次仅单个输入发生变化，这类重渲染完全不必要。

我准备了对照实现样例，包含两个表单：一个由子输入组件自管理所有状态，另一个将所有状态提升到表单层级。输入内容时查看控制台日志可以发现：状态提升到表单层级的方案中，每次输入变化都会导致两个输入组件都触发重渲染。

完全可以实现，以下是几种经过生产验证的实现思路，都能满足「子组件自管理状态、单输入变化不触发全表单重渲染、父组件可按需聚合取值」的要求：

• 基于ref的命令式注册方案（性能最优，实现成本最低）
  在Form层通过useRef维护一个不触发重渲染的存储对象，给每个Input传入注册回调。Input组件挂载时，将自身的当前值、取值方法注册到这个ref对象上，卸载时移除对应注册项；输入过程中值的变化完全由Input自身状态维护，不会触发Form和其他Input重渲染。触发表单提交时，Form直接遍历ref中存储的所有字段取值方法，就能拿到全量最新的表单值。这也是React Hook Form等高性能表单库的核心实现逻辑。
• 基于发布订阅的Context方案（扩展性最强，适合复杂联动场景）
  不要通过React Context直接传递全量表单值（Context值变化会触发所有消费组件重渲染），而是通过Context传递一个事件发布订阅实例。Input挂载时在实例上注册自身字段的取值方法，值变化时只触发订阅了对应字段的组件更新；Form提交时直接通过实例拉取全量字段值即可。这种方案支持跨层级字段联动、动态表单等复杂场景，同样不会出现单字段变化触发全量重渲染的问题。
• 细粒度状态拆分+组件记忆化方案（适配声明式编程习惯）
  如果更偏好声明式的状态管理逻辑，可以将每个字段的状态拆分为独立的状态单元，不要把所有字段值存在同一个Form层的state对象里；同时用React.memo包裹Input组件，仅当组件自身对应的字段状态变化时才触发重渲染，避免无关组件跟着更新。需要注意控制状态拆分粒度，粒度过细会提升后续代码维护成本。

内容的提问来源于stack exchange，提问作者0x5929