React单组件表单提交场景下的最佳数据存储方式咨询

嘿，作为React新手遇到这个困惑太正常了，我来帮你拆解清楚每种方案的优劣，以及最适合你的选择：

先分析你提到的两种方案 #

1. 存储在State中 #

你对React Docs的理解完全到位——“仅需用于渲染的数据才应存在State里”。你的场景里完全不需要用这些输入数据更新UI，把它们放进State会导致不必要的重渲染：每次调用setState都会触发组件重新渲染，哪怕界面根本不需要变化。而且直接修改this.state（跳过setState）又违反了React的状态更新规范，容易埋下难以追踪的bug，所以这个方案显然不是最优解。

2. 存储为类变量 #

这个方案其实完美贴合你的需求！类组件里的自定义变量（比如this.formData = {}）不属于React的状态管理体系，修改它们不会触发任何重渲染，完全匹配“仅在提交时处理数据”的场景。而且React Docs并没有禁止使用类变量，只是要求不要直接修改state对象，所以这种做法是完全合规的。

给你举个简单的代码示例：

class MyForm extends React.Component {
  formData = {};

  handleInputChange = (e) => {
    const { name, value } = e.target;
    this.formData[name] = value;
  };

  handleSubmit = (e) => {
    e.preventDefault();
    // 在这里处理收集到的表单数据
    console.log('提交的数据:', this.formData);
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input name="username" onChange={this.handleInputChange} placeholder="用户名" />
        <input name="email" type="email" onChange={this.handleInputChange} placeholder="邮箱" />
        <button type="submit">提交</button>
      </form>
    );
  }
}

额外推荐：使用Refs直接获取值 #

如果你的表单元素数量不多，还有更简洁的方式——直接用React Refs在提交时获取输入值，连中间变量都省了：

class MyForm extends React.Component {
  usernameRef = React.createRef();
  emailRef = React.createRef();

  handleSubmit = (e) => {
    e.preventDefault();
    const formData = {
      username: this.usernameRef.current.value,
      email: this.emailRef.current.value
    };
    // 处理表单数据
    console.log('提交的数据:', formData);
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input ref={this.usernameRef} placeholder="用户名" />
        <input ref={this.emailRef} type="email" placeholder="邮箱" />
        <button type="submit">提交</button>
      </form>
    );
  }
}

这种方式更直接，不需要维护中间状态，适合简单表单场景。

总结最优方案 #

• 如果是简单表单：优先用Refs直接获取提交数据，代码最简洁。
• 如果是复杂表单（比如需要在输入过程中做一些非渲染逻辑，比如数据格式化、临时校验等）：用类变量存储数据更合适，避免不必要的重渲染。
• State方案在这里完全不推荐，因为它会带来无意义的性能消耗，还可能引发规范问题。

内容的提问来源于stack exchange，提问作者Vanya Makhlinets