리액션 훅 형식이 뭐예요? - 7 판.

React Hook Form은 곧 만 2세가 된다.프로젝트 자체가 여전히 첫날처럼 활발하다.여러 해 동안 많은 경험과 교훈이 버전 7의 제작과 디자인에 기여했다.나는 여기서 여러분께 다음 주요 판본 중의 몇 가지 원인과 개선을 소개합니다.우리의 사명은 변하지 않는다. 모든 개발자의 생활이 건축 형식에서 더욱 수월해지는 것이다.

V7 비전:

📖 (DX) 엄격하게 인쇄된 테이블
💁‍♂️ 단순성 및 일관성
🏎 표현
🏋🏻‍♀️ 포장 크기 감소
API에 대해 자세히 살펴보고 처음부터 설정한 비전을 반영하겠습니다.

</> 레지스터

그 중 하나는 APIregister였다.대부분의 사람들이 React Hook 폼은 typescript를 바탕으로 구축된 것으로 알고 있으며 대부분typescript 개발자에게 유형 안전은 중요한 부분이다.우리가 직면한 도전 중의 하나는 입력 검사name다.이것은 typescript 4.1 업데이트Template Literal를 통해 이루어진 것이다.나는 흥분해서 이 점을 발견하고, 이 새로운 기능이 React Hook 폼과 호환될 수 있도록 미리 계획을 세우기 시작했다.
다음과 같은 변경 사항이 필요합니다.

- <input name="test" ref={register} />
+ <input {...register('test')} />

// the following props will be spread into inputs
const { onChange, onBlur, ref, name } = register('test');

위에서 보듯이, 현재 우리는 위의 함수를 호출해서 형식 검사를 할 수 있습니다.최초의 API는 장점과 단점이 있고 유형 보안과 호환되지 않을 것입니다.이 변경을 사용하면 갈고리 창의 나머지 API 유형 검사에 영향을 줍니다. 예를 들어 useController, Controller 등입니다.
다음 그림은 중첩된 필드에 입력한 이름의 유형 검사를 보여 줍니다.
beta 버전이 설치된 상태에서 다음 코드 샌드박스를 시험적으로 사용할 수 있습니다.

</> 분해기

패턴 검증을 사용하고 있는 사람들resolver은 갈수록 강해지고 있다.현재 충돌 해결 프로그램에 검증된 상하문이 없습니다. 이것은 검증된 입력에 대한 정보가 부족하다는 것을 의미합니다.개발자가 검증된 필드에 접근할 수 있도록 이 부분을 개선하고 있습니다.itsref도 마찬가지입니다.그러면 다음 기능이 잠금 해제될 수 있습니다.

검증 최적화: 만약에 모든 모델 검증 라이브러리가 필드급 검증을 지원한다면 개발자가 검증을 최적화할 수 있고 매번 전체 모델을 실행할 필요가 없다onChange.

초점 관리: 입력 DOM 요소에 접근하여 더 좋은 사용자 정의 초점 관리를 실현한다.

다음은 해결자 유형 정의입니다.

- resolver: (values: any, context?: object) => Promise<ResolverResult> | ResolverResult
+ resolver: (
+   values: any, 
+   context: object | undefined, 
+   options: { 
+     criteriaMode?: 'firstError' | 'all', 
+     names?: string[],
+     fields: { [name]: field } // Support nested field
+   }
+ ) => Promise<ResolverResult> | ResolverResult 

만약 그가 이 놀라운 일의 배후 조종자라면, 그는 resolver 주위에 상세한 기술 블로그 글을 쓸 것이다.

</>useFormState

갈고리 폼의 현재 버전으로 폼 상태 업데이트는 호출된 루트/폼 레벨 useForm 에서 다시 나타납니다.이것은 7판에 변화가 발생할 것입니다. 이 새로 도입된 사용자 정의 갈고리 useFormState 를 통해 구성 요소 단계에서 단일 폼 상태 업데이트를 구독할 수 있습니다.이것은 개발자로서 구성 요소가 언제 폼 상태 업데이트 알림을 받는지 제어할 수 있음을 의미합니다.또한 useFormState를 useController와 Controler에 베이킹하기 때문에 모든 제어된 입력은 다시 렌더링하는 데 완전히 격리됩니다.

// Subscribe to isDirty, touchedFields at the component level
const { isDirty, touchedFields } = useFormState();

// Subscribe **only** to isDirty and isTouched.
const Test = () => {
  const { meta: { isDirty, isTouched } } = useController();
}

이것은 우리 DevTool 의 좋은 예입니다. 이 예에서 이 새로운 사용자 정의 연결을 이용하여 구성 요소 단계에서 다시 보이게 합니다.

</> 양식 사용

처음 릴리즈부터 HTML 표준 및 기본 양식 비헤이비어와 일치하도록 했습니다.그 중 하나는 입력이 삭제되었을 때 그 값도 무시된다는 것이다.그러나 이러한 행위는 많은 React 개발자들이 마운트 해제 후 입력 값이 사라진 원인에 대해 곤혹스러워하며, 사용자에게 옵션을 제공하기 위해 shouldUnregisterconfig를 도입해야 한다는 우려를 완화시켰다.따라서 코드 라이브러리에서 상당히 많은 추가 논리와 복잡성을 초래했다.버전 7에서 우리는 shouldUnregister를 삭제하고 있다. 이것은 개발자가 그들의 입력 값을 제어하기 위해 unregister를 사용해야 한다는 것을 의미한다.그것은 틀림없이 자신의 장점과 단점이 있을 것이다. 그러나 나는 이러한 변화가 대부분의 개발자들에게 더욱 의미가 있다고 생각한다.다음 예는 다음과 같습니다.

const [show, setShow] = React.useState(true);

// V6 the following input value will be removed
{show && <input ref={register} name="test"} 

// V7 the following input value will be retained
{show && <input {...register('test')}} // V7

// V7 until the following line is invoked then the value will be removed
unregister('test')

이 변화는lib 패키지의 크기에도 큰 도움이 된다.

결론

React 갈고리 표는 일반적으로 더 좋은 유형 검사가 있고, 더욱 작고, 더욱 빠르며, 개발자에게 더욱 우호적이다.나는 이 문장이 우리가 7판에서 시도한 원리와 개선을 설명할 수 있기를 바란다.피드백, 우려 사항 또는 질문이 있으면 언제든지 참여해 주십시오Version 7 RFC:
너도 V7(17분)쯤에 내가 유튜브에 올린 이 영상을 볼 수 있다.

보너스

또한 다음과 같은 기능이 개선되었습니다.
문서:

개발 도구:

고마워요 고마워요

이 주요 버전에 참여하고 공헌해 주신 모든 분들께 감사드립니다.특히 감사합니다:

다음 버전resolver과 나머지hook form team를 누가 만들었는지.

wdfinch 그는 줄곧 V7의 토론에 참여했고 도중에 단독으로 오류와 문제를 보고했다.

❤️ 본 프로젝트에 대한 지지와 협찬에 감사 드립니다!