Каковы основные различия между контролируемыми и неконтролируемыми компонентами в форме реакции-хуков?

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>

и это неконтролируемая форма

<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 означает, что неконтролируемый ввод будет подписан на изменение ввода и получит его значение с помощью формы реакции-крючка.
• Controller: https://react-hook-form.com/api - это компонент-оболочка, который изолирует контролируемый компонент для повторного рендеринга в пределах своей области действия и приводит к меньшему влиянию на производительность на уровне вашего приложения / формы.