[번역] 커스텀 후크를 사용하여 React 구성요소 리팩토링

사람들이 React 함수 컴포넌트에 대해 이야기하는 것을 자주 듣습니다. 함수 컴포넌트는 필연적으로 더 커지고 더 복잡한 로직을 갖게 될 것이라고 언급합니다. 결국 우리는 "함수"에 구성 요소를 작성했으므로 구성 요소가 확장되고 함수가 계속 확장된다는 점을 받아들여야 합니다. 이는 React 구성 요소에서도 언급됩니다.

함수 구성 요소는 점점 더 많은 작업을 수행할 수 있으므로 코드 베이스의 함수 구성 요소는 전체적으로 점점 더 길어질 것입니다. [관련 권장 사항: Redis 비디오 튜토리얼, 프로그래밍 비디오]

또한 다음을 수행해야 한다고 언급됩니다:

추상화를 조기에 추가하지 않도록 노력하세요

CodeScene을 사용하는 경우 경고가 발생할 수 있습니다. 기능이 너무 길거나 복잡할 때. 이전에 말한 내용을 따르면 CodeScene 관련 경고를 더 광범위하게 구성해야 하는지 고려할 수 있습니다. 물론 그렇게 할 수도 있지만, 그렇게 해서도 안 되고, 코드에 많은 추상화를 추가하는 것도 거부해서는 안 된다고 생각합니다. 우리는 이로부터 많은 이점을 얻을 수 있고, 대부분의 경우 비용도 들지 않습니다. 높은. 우리는 계속해서 코드 상태를 매우 좋게 유지할 수 있습니다!

복잡성 다루기

함수 구성 요소가 "함수"로 작성되었지만 이 함수는 여전히 다른 함수와 마찬가지로 많은 다른 함수로 구성될 수 있다는 점을 인식해야 합니다. useState, useEffect 또는 기타 후크와 마찬가지로 하위 구성 요소 자체도 함수입니다. 따라서 함수 구성 요소의 복잡성을 처리하기 위해 자연스럽게 동일한 아이디어를 사용할 수 있습니다. useState ，useEffect ，抑或是别的hooks，子组件它们本身也是个函数。因此我们自然可以利用相同的思路来处理函数组件的复杂性问题：通过建立一个新函数，来把即符合公共模式又复杂的代码封装起来。

比较常见的处理复杂组件的方式是把它分解成多个子组件。但是这么做可能会让人觉得不自然或是很难准确的去描述这些子组件。这时候我们就可以借助梳理组件的钩子函数的逻辑来发现新的抽象点。

每当我们在组件内看到由useState 、useEffect 或是其他内置钩子函数组成的长长的列表时，我们就应该去考虑是否可以将它们提取到一个自定义hook中去。自定义hook函数是一种可以在其内部使用其他钩子函数的函数，并且创建一个自定义钩子函数也很简单。

如下所示的组件相当于一个看板，用一个列表展示一个用户仓库的数据（想像成和github类似的）。这个组件并不算是个复杂组件，但是它是展示如何应用自定义hook的一个不错的例子。

function Dashboard() {
  const [repos, setRepos] = useState<Repo[]>([]);
  const [isLoadingRepos, setIsLoadingRepos] = useState(true);
  const [repoError, setRepoError] = useState<string | null>(null);

  useEffect(() => {
    fetchRepos()
      .then((p) => setRepos(p))
      .catch((err) => setRepoError(err))
      .finally(() => setIsLoadingRepos(false));
  }, []);

  return (
    <div className="flex gap-2 mb-8">
      {isLoadingRepos && <Spinner />}
      {repoError && <span>{repoError}</span>}
      {repos.map((r) => (
        <RepoCard key={i.name} item={r} />
      ))}
    </div>
  );
}

我们要把钩子逻辑提取到一个自定义hook中，我们只需要把这些代码复制到一个以use 开头的函数中（在这里我们将其命名为useRepos）：

/**
 * 请求所有仓库用户列表的hook函数
 */
export function useRepos() {
  const [repos, setRepos] = useState<Repo[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    fetchRepos()
      .then((p) => setRepos(p))
      .catch((err) => setError(err))
      .finally(() => setIsLoading(false));
  }, []);

  return [repos, isLoading, error] as const;
}

必须用use 开头的原因是linter 插件可以检测到你当前创建的是个钩子函数而不是普通函数，这样插件就可以检查你的钩子函数是否符合正确的自定义钩子的相关规则。

相比提炼之前，提炼后出现的新东西只有返回语句和as const 。这里的类型提示只是为了确保类型推断是正确的：一个包含3个元素的数组，类型分别是Repo[], boolean, string | null 。当然，你可以从钩子函数返回任何你希望返回的东西。

译者注：这里添加as const 在ts类型推断的区别主要体现在数字元素的个数。不添加as const ，推断的类型为(string | boolean | Repo[] | null)[]，添加后的类型推断为readonly [Repo[], boolean, string | null] 。

将自定义钩子useRepos 应用在我们的组件中，代码变成了：

function Dashboard() {
  const [repos, isLoadingRepos, repoError] = useRepos();

  return (
    <div className="flex gap-2 mb-8">
      {isLoadingRepos && <Spinner />}
      {repoError && <span>{repoError}</span>}
      {repos.map((i) => (
        <RepoCard key={i.name} item={i} />
      ))}
    </div>
  );
}

可以发现，我们现在在组件内部无法调用任何的setter 函数，即无法改变状态。在这个组件我们已经不需要包含修改状态的逻辑，这些逻辑都包含在了useRepos새로운 함수를 생성하여 공통 패턴을 따르는 복잡한 코드를 캡슐화할 수 있습니다

.

복잡한 구성 요소를 처리하는 가장 일반적인 방법은 여러 하위 구성 요소로 분해하는 것입니다. 그러나 그렇게 하면 부자연스러워지거나 이러한 하위 구성 요소를 정확하게 설명하기 어려울 수 있습니다. 이때 컴포넌트의 Hook 기능의 로직을 정리해보면 새로운 추상적인 점을 발견할 수 있습니다.

구성 요소에 useState, useEffect 또는 기타 내장 후크 함수의 긴 목록이 표시될 때마다 가능한지 여부를 고려해야 합니다. 이러한 함수는 사용자 지정 후크로 추출됩니다. . 커스텀 후크 함수는 내부에 다른 후크 기능을 사용할 수 있는 함수로, 커스텀 후크 함수를 만드는 방법도 간단합니다.

🎜아래에 표시된 구성 요소는 목록을 사용하여 사용자 웨어하우스의 데이터를 표시하는 대시보드와 동일합니다(github와 유사하다고 상상해 보세요). 이 구성 요소는 복잡한 구성 요소는 아니지만 사용자 정의 후크를 적용하는 방법에 대한 좋은 예입니다. 🎜rrreee🎜후크 로직을 사용자 정의 후크로 추출할 예정입니다. 이 코드를 use로 시작하는 함수에 복사하면 됩니다(여기서는 이름을 useRepos 로 지정하겠습니다). ): 🎜rrreee🎜는 use로 시작해야 합니다. 왜냐하면 linter 플러그인은 현재 생성 중인 것이 일반 함수가 아닌 후크 함수임을 감지할 수 있기 때문입니다. 플러그인 후크 기능이 올바른 사용자 정의 후크관련 규칙 🎜. 🎜🎜정제 전과 비교하여, 개선 후 새롭게 나타난 것은 🎜return 문🎜과 as const뿐이었습니다. 여기서 유형 힌트는 유형 추론이 올바른지 확인하기 위한 것입니다. 3개의 요소가 포함된 배열, 유형은 Repo[], boolean, string null | 물론, 후크 함수에서 원하는 것은 무엇이든 반환할 수 있습니다. 🎜🎜🎜번역가의 메모: 여기에 <code>as const를 추가하세요. ts 유형 추론의 차이는 주로 숫자 요소 수에 반영됩니다. 를 const로 추가하지 않으면 추론된 유형은 (string | boolean | Repo[] | null)[]이고 추가된 유형 추론은 readonly [Repo[ ], 부울, 문자열 null]. 🎜🎜🎜사용자 정의 후크 useRepos를 구성 요소에 적용하면 코드는 다음과 같습니다. 🎜rrreee🎜이제 구성 요소 내에서 어떤 setter도 호출할 수 없다는 것을 알 수 있습니다. 상태. 이 구성 요소에는 더 이상 상태를 수정하는 논리를 포함할 필요가 없습니다. 이러한 논리는 useRepos 후크 함수에 포함되어 있습니다. 물론 정말로 필요한 경우에는 후크 함수의 return 문에 표시할 수 있습니다. 🎜🎜이 작업을 수행하면 어떤 이점이 있나요? React의 문서에는 다음이 언급되어 있습니다.🎜🎜🎜사용자 정의 후크 함수를 추출하여 구성 요소 논리를 재사용할 수 있습니다🎜

이 애플리케이션의 다른 구성 요소도 웨어하우스의 사용자 목록을 표시해야 하는 경우 이 구성 요소가 해야 할 일은 useRepos 후크 기능을 가져오는 것뿐입니다. 어떤 형태의 캐싱을 사용하거나 폴링 또는 더 복잡한 접근 방식을 통해 지속적으로 업데이트되는 등 후크가 업데이트되면 이 후크를 참조하는 모든 구성 요소가 이점을 얻게 됩니다. useRepos 钩子函数。如果钩子更新了，可能使用某种形式的缓存，或者通过轮询或更复杂的方法进行持续更新，那么引用了这个钩子的所有组件都将受益。

当然，提取自定义钩子除了可以方便复用外，还有别的好处。在我们的例子中，所有的useState 和useEffect 都是为了实现同一个功能——就是获取库用户列表，我们把这个看作一个原子功能，那么在一个组件中，包含很多个这样的原子功能也是很常见的。如果我们把这些原子功能的代码都分别提取到不同的自定义钩子函数中，就更容易发现哪些状态在我们修改代码逻辑时要保持同步更新，不容易出现遗漏的情况。除此之外，这么做的好处还有：

• 越短小的函数越容易看懂
• 为原子功能命名的能力（如useRepo）
• 更自然的提供文档说明（每个自定义钩子函数的功能更加内聚单一，这种函数也很容易去写注释）

最后

我们已经了解到React的钩子函数并没有多么神秘，也和其他函数一样很容易就可以创建。我们可以创建自己的领域特定的钩子，进而在整个应用程序中重用。也可以在各种博客或“钩子库”中找到很多预先编写好的通用钩子。这些钩子可以想useState 和useEffect 一样很方便的在我们的项目中应用。Dan Abramov的useInterval钩子就是一个例子，例如你有一个类似于useRepos 的钩子，但是你需要可以轮询更新？那你就可以尝试在你的钩子中使用useInterval

물론, 사용자 정의 후크를 추출하면 재사용이 용이할 뿐만 아니라 다른 이점도 있습니다. 이 예에서는 모든 useState 및 useEffect가 동일한 기능을 달성하는 데 사용됩니다. 즉, 라이브러리 사용자 목록을 얻는 것입니다. 이를 원자 함수로 간주하므로 이는 또한 일반적입니다. 구성 요소가 이러한 원자 기능을 많이 포함하는 경우. 이러한 원자 함수의 코드를 다양한 사용자 정의 후크 함수로 추출하면 코드 논리를 수정할 때 어떤 상태를 동기적으로 업데이트해야 하는지 쉽게 찾을 수 있으며 누락될 가능성도 줄어듭니다. 또한 이렇게 하면 다음과 같은 이점이 있습니다.

• 함수가 짧을수록 이해하기 쉽습니다.
• 원자적 함수에 이름을 지정하는 기능(예: useRepo)
문서 제공 더 자연스럽게(각 사용자 정의 후크 함수의 기능은 더 응집력 있고 단일하며 이러한 종류의 함수에 대한 설명을 작성하기 쉽습니다)

마지막으로

우리는 React의 Hook 기능이 그다지 신비하지 않고 다른 기능처럼 생성될 수 있다는 것을 배웠습니다. 우리는 고유한 도메인별 후크를 생성하고 이를 애플리케이션 전체에서 재사용할 수 있습니다. 다양한 블로그나 "후크 라이브러리"에서 미리 작성된 범용 후크를 많이 찾을 수도 있습니다. 이러한 후크는 useState 및 useEffect와 마찬가지로 프로젝트에서 쉽게 사용할 수 있습니다. Dan Abramov의 useInterval 후크가 한 예입니다. 예를 들어 useRepos와 유사한 후크가 있지만 업데이트를 폴링할 수 있어야 합니까? 그런 다음 후크에서 useInterval을 사용해 볼 수 있습니다.

영어 원본 주소: https://codescene.com/engineering-blog/refactoring-comComponents-in-react-with-custom-hooks

[추천 학습: 🎜javascript 비디오 튜토리얼🎜]🎜

위 내용은 [번역] 커스텀 후크를 사용하여 React 구성요소 리팩토링의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!