受控组件和非受控组件有什么区别？表单应该怎么处理？

// 受控：state 是唯一的数据来源
function Controlled() {
  const [name, setName] = useState('')
  return <input value={name} onChange={(e) => setName(e.target.value)} />
}

// 非受控：值在 DOM 里，提交时再读
function Uncontrolled({ onSave }) {
  function handleSubmit(e) {
    e.preventDefault()
    const formData = new FormData(e.currentTarget)
    onSave(Object.fromEntries(formData)) // { title: '...' }，key 来自 name 属性
  }
  return (
    <form onSubmit={handleSubmit}>
      <input name="title" defaultValue="标题" />
      <button>保存</button>
    </form>
  )
}

const [name, setName] = useState() // 初始是 undefined
<input value={name} onChange={(e) => setName(e.target.value)} />

<form action={async (formData) => { await saveProfile(Object.fromEntries(formData)) }}>
  <input name="nickname" defaultValue={user.nickname} />
  <SubmitButton />
</form>

import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { z } from 'zod'

const schema = z
  .object({
    username: z.string().min(3, '用户名至少 3 个字符'),
    password: z.string().min(8, '密码至少 8 位'),
    confirm: z.string(),
  })
  .refine((data) => data.password === data.confirm, {
    message: '两次密码不一致',
    path: ['confirm'], // 错误挂到 confirm 字段上
  })

type FormValues = z.infer<typeof schema> // 类型直接从 schema 推导

function SignupForm({ onSubmit }: { onSubmit: (values: FormValues) => Promise<void> }) {
  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting },
  } = useForm<FormValues>({ resolver: zodResolver(schema) })

  return (
    // handleSubmit 先校验，通过后才调用 onSubmit
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('username')} />
      {errors.username && <p>{errors.username.message}</p>}
      <input type="password" {...register('password')} />
      {errors.password && <p>{errors.password.message}</p>}
      <input type="password" {...register('confirm')} />
      {errors.confirm && <p>{errors.confirm.message}</p>}
      <button disabled={isSubmitting}>注册</button>
    </form>
  )
}