React中watch与useState的区别及表单值监控方案咨询

问题1：useState与watch的区别及场景选择 #

核心区别 #

• 定位不同：useState是React原生状态管理钩子，负责组件内部任意状态的存储与手动更新；watch是react-hook-form专属工具，仅用于追踪表单字段的状态变化，依赖表单上下文工作。
• 更新逻辑不同：useState必须通过setXxx主动触发状态更新，才会引发组件重渲染；watch会自动关联表单字段，当用户修改表单输入（如文本框、下拉框）时，自动返回最新值并触发依赖该值的组件重渲染。
• 状态控制权不同：useState的状态完全由开发者掌控，更新时机和值全手动决定；watch的状态由react-hook-form维护，它只是暴露字段的实时值，开发者无需手动维护表单状态同步。

场景选择 #

• 如果是非表单场景的状态管理（比如组件显隐、主题切换、计数器等），直接用useState。
• 如果是文本框、下拉框这类表单字段的监听与取值，优先用watch：react-hook-form已经封装了表单状态同步、校验、提交等逻辑，用watch可以省去手动编写onChange和状态更新的冗余代码，更简洁高效。

问题2：无需onChange监听city值变化并打印日志 #

要实现这个需求，需要结合react-hook-form的watch和React的useEffect，同时确保表单字段被正确注册到react-hook-form的上下文中，代码示例如下：

import * as React from 'react';
import { useEffect } from 'react';
import { useForm, Controller } from 'react-hook-form';

import './style.css';

export default function App() {
  const { watch, control } = useForm({ 
    mode: 'all', 
    reValidateMode: 'onBlur',
    defaultValues: {
      city: 'Moscow' // 初始化表单字段默认值
    }
  });

  // 监听city字段的实时值
  const wcity = watch('city');

  // 当wcity变化时自动打印日志
  useEffect(() => {
    console.log('city值更新为:', wcity);
  }, [wcity]);

  return (
    <div>
      <p>编辑输入框，查看控制台的日志输出:</p>
      {/* 用Controller注册表单字段，让react-hook-form接管状态 */}
      <Controller
        control={control}
        name="city"
        render={({ field }) => <input {...field} />}
      />
      <br />
      <label>当前城市: {wcity}</label>
    </div>
  );
}

关键说明 #

1. 必须通过defaultValues给表单字段设置初始值，否则react-hook-form无法识别该字段，watch也无法追踪。
2. 要用Controller（或register方法）包裹原生input，让react-hook-form接管表单字段的状态管理，这样用户输入时字段值才会被同步到表单上下文中，watch才能监听到变化。
3. 借助useEffect监听watch返回的wcity值，当值发生变化时自动执行日志打印，全程无需手动编写onChange事件。

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