useTransition 후크를 사용하여 React의 성능을 향상시키는 방법-JS 튜토리얼-php.cn

useTransition 후크를 사용하여 React의 성능을 향상시키는 방법

WBOY

풀어 주다： 2024-08-22 18:40:05

원래의

931명이 탐색했습니다.

How to use the useTransition hook the improve performance in React

React는 사용자 인터페이스 구축에 널리 사용되는 JavaScript 라이브러리입니다. 재사용 가능한 UI 구성 요소를 만드는 데 효율성과 초점을 맞춘 것으로 알려져 있습니다. React의 주요 기능 중 하나는 React 상태에 연결되는 기능인 후크를 도입하는 것입니다. 그 후크 중 하나가 useTransition 후크입니다. 이 후크를 사용하면 인터페이스를 차단하지 않고 상태 변경이 이루어지므로 원활한 경험이 가능합니다.

useTransition 후크 이해

useTransition 후크를 더 잘 이해하기 위해 다음 예를 살펴보겠습니다.

import {useState} from "react"

const App = () => {
  const [post, setPost] = useState(undefined)

  const fetchData = async () => {
    await fetch("https://jsonplaceholder.org/posts/1")
      .then((result) => result.json())
      .then((result) => setPost(result))
  }

  return(
    <div>
      {post !== undefined && (
      <div className="post-card">
        <h2>{post?.title}</h2>
        <image src={post?.image} />
        <p>{post?.content}</p>
      </div>
      )}
      <button onClick={fetchData}>
        Get post
      </button>
    </div>
  )
}

export default App;

로그인 후 복사

인터넷 속도가 느리거나 fetchData 함수 내에서 실행되는 작업의 양에 따라 버튼을 클릭할 때 가져오기 작업 중에 UI가 정지되어 사용자 경험이 저하될 수 있습니다. 또한 사용자가 애플리케이션을 남용하는 것을 원하지 않는 경우 사용자가 버튼을 스팸할 가능성이 있습니다. 또한 애플리케이션은 작업이 진행 중이라는 표시를 사용자에게 표시하지 않습니다.

이러한 문제는 이전 코드를 다음과 같이 업데이트할 수 있는 useTransition 후크를 사용하여 쉽게 해결할 수 있습니다.

import {useState, useTransition} from "react"
import {ImSpinner2} from "react-icons/im"

const App = () => {
  const [pending, startTransition] = useTransition()
  const [post, setPost] = useState({})

  const fetchData = () => {
    startTransition( async () => {
      await fetch("https://jsonplaceholder.org/posts/1")
        .then((result) => result.json())
        .then((result) => setPost(result))
    })
  }

  return(
    <div>
      {post !== undefined && (
      <div className="post-card">
        <h2>{post.title}</h2>
        <image src={post.image} />
        <p>{post.content}</p>
      </div>
      )}
      <button
        disabled={pending} 
        onClick={fetchData}>
        {pending ? <ImSpinner2 className="animate-spin" /> : "Get post" }
      </button>
    </div>
  )
}

export default App;

로그인 후 복사

호출된 useTransition 후크는 두 가지 값을 반환합니다. 즉, 작업이 실행되고 startTransition 함수에 더 긴급한 작업으로 인해 중단되는 작업이 포함된 경우 어떤 값이 true가 될지 보류 중입니다.

위의 예에서는 startTransition 함수 내부에 있는 비동기 화살표 함수에 가져오기 요청을 래핑했습니다.

그리고 버튼에서 보류 중으로 연결된 비활성화된 속성을 포함하는 방식으로 수정하고 작업이 보류 중일 때 스피너를 표시하고 작업이 보류 중일 때 "게시물 가져오기" 라벨을 표시하도록 버튼 라벨을 변경했습니다. 작업이 보류 중이 아닙니다.

이를 통해 원활한 사용자 경험을 제공하고 더 나은 성능을 제공하며 사용자의 잘못된 행동으로부터 애플리케이션을 보호할 수 있습니다.