react-hooks-form 中的受控组件和非受控组件之间的主要区别是什么？

Question

我正在使用反应钩子形式。我阅读了有关受控和不受控的文档。

受控

<form onSubmit={handleSubmit(onSubmit)}>
  <input name="firstName" ref={register({ required: true })} />
  <input name="lastName" ref={register} />
  <input type="reset" /> // standard reset button
  <input type="button" onClick={reset} />
  <input type="button" onClick={() => reset({ firstName: "bill" }); }} /> // reset form with values
  <input type="button" onClick={() => {
    reset({
      firstName: "bill"
    }, {
      errors: true, // errors will not be reset 
      dirtyFields: true, // dirtyFields will not be reset
      isDirty: true, // dirty will not be reset
      isSubmitted: false,
      touched: false,
      isValid: false,
      submitCount: false,
    });
  }} />
</form>

这是UnControlled形式

<form onSubmit={handleSubmit(onSubmit)}>
  <Controller 
    as={TextField} 
    name="firstName"
    control={control} 
    rules={ required: true } 
    defaultValue=""
  />
  <Controller 
    as={TextField} 
    name="lastName"
    control={control}
    defaultValue="" 
  />
  
  <input type="submit" />
  <input type="button" onClick={reset} />
  <input
    type="button"
    onClick={() => {
      reset({
        firstName: "bill",
        lastName: "luo"
      });
    }}
  />
</form>

有人可以告诉我这有什么区别吗？通过制造受控组件而不是不受控组件，我有什么好处？

Answer 1

React Hook Form 包含不受控的表单和输入，这意味着您仍然可以构建受控的表单和输入：https://twitter.com/bluebill1049/status/1286438673546768386

那么ref={register}和Controller有什么区别呢？

ref={register}：https://react-hook-form.com/api#register 表示不受控制的输入将订阅输入更改并通过 react-hook-form.
Controller：https://react-hook-form.com/api#Controller 是一个包装器组件，它将受控组件隔离到其范围内的 re-render，从而减少对 app/form 级别的性能影响。

react-hooks-form 中的受控组件和非受控组件之间的主要区别是什么？

What are major differences between Controlled and Uncontrolled Components in react-hooks-form?

javascript

reactjs

react-hook-form