React 안정 릴리스: 새로운 기능 및 업그레이드 방법-JS 튜토리얼-php.cn

React 안정 릴리스: 새로운 기능 및 업그레이드 방법

DDD

풀어 주다： 2024-12-06 21:04:14

원래의

376명이 탐색했습니다.

React Stable Release: What’s New and How to Upgrade

React 19는 공식적으로 안정적이며 이제 npm에서 사용할 수 있습니다! 다양한 기능과 향상된 기능으로 가득 차 있어 개발을 간소화하고 성능을 개선하며 일반적인 UI 패턴 처리를 단순화하도록 설계되었습니다. React 19의 새로운 기능과 프로젝트에 이러한 기능을 적용하는 방법을 포괄적으로 살펴보세요.

React 19의 주요 추가사항

액션 및 비동기 전환

작업은 데이터 변형, 보류 상태, 오류 처리, 낙관적 업데이트와 같은 비동기 작업 관리를 단순화합니다. useTransition 또는 새로운 useActionState 후크를 사용하면 다음을 수행할 수 있습니다.

보류 상태를 자동으로 처리합니다.

더 나은 오류 처리를 제공합니다.

action 또는 formAction 소품을 사용하여

요소가 포함된 양식 제출을 관리합니다.

예: useActionState를 사용한 단순화된 양식

function ChangeName({ name, setName }) {
  const [error, submitAction, isPending] = useActionState(
    async (previousState, formData) => {
      const error = await updateName(formData.get("name"));
      if (error) {
        return error;
      }
      redirect("/path");
      return null;
    },
    null,
  );

  return (
    <form action={submitAction}>
      <input type="text" name="name" />
      <button type="submit" disabled={isPending}>Update</button>
      {error && <p>{error}</p>}
    </form>
  );
}

로그인 후 복사

useOptimistic을 사용한 Optimistic 업데이트

새로운 useOptimistic 후크를 사용하면 비동기 응답을 기다리는 동안 사용자에게 즉각적인 피드백을 제공할 수 있습니다.

function ChangeName({ currentName, onUpdateName }) {
  const [optimisticName, setOptimisticName] = useOptimistic(currentName);

  const submitAction = async (formData) => {
    const newName = formData.get("name");
    setOptimisticName(newName);
    const updatedName = await updateName(newName);
    onUpdateName(updatedName);
  };

  return (
    <form action={submitAction}>
      <p>Your name is: {optimisticName}</p>
      <input type="text" name="name" />
    </form>
  );
}

로그인 후 복사

API 사용

사용 API를 사용하면 약속과 컨텍스트의 조건부 렌더링이 가능하므로 보다 유연한 구성 요소 설계가 가능합니다.

import { use } from 'react';
function Comments({ commentsPromise }) {
  const comments = use(commentsPromise);
  return comments.map(comment => <p key={comment.id}>{comment}</p>);
}

로그인 후 복사

네이티브 메타데이터 관리

React 19는

, , 태그를 구성 요소에서 직접 렌더링하여 섹션에 자동으로 끌어올리는 기능을 지원합니다.

function BlogPost({ post }) {
  return (
    <article>
      <title>{post.title}</title>
      <meta name="author" content="Author Name" />
    </article>
  );
}

로그인 후 복사

향상된 스타일시트 및 스크립트 관리

React 19에서는 다음을 기본적으로 지원합니다.

을 사용하여 우선순위가 제어된 스타일시트

구성 요소 트리 내에서 비동기 스크립트가 렌더링되어 중복 제거 및 올바른 실행 순서가 보장됩니다.

<link rel="stylesheet" href="styles.css" precedence="default" />
<script async src="script.js"></script>

로그인 후 복사

서버 구성 요소 및 작업

React 서버 구성 요소가 이제 안정적이므로 구성 요소를 미리 렌더링할 수 있습니다. 서버 작업("use server" 지시어에 의해 활성화됨)과 결합되어 클라이언트 구성 요소는 비동기 서버측 기능을 원활하게 호출할 수 있습니다.

오류 처리 개선

React 19는 오류 보고를 통합하여 간결하고 실행 가능한 오류 메시지를 제공합니다. 이제 개발자는 세분화된 오류 처리를 위해 onCaughtError, onUncaughtError 및 onRecoverableError를 사용할 수 있습니다.

소품으로 참조

함수 구성요소는 이제 ref를 prop으로 허용할 수 있으므로,forwardRef가 필요하지 않아 코드가 단순화됩니다.

수화 및 타사 통합

React 19는 브라우저 확장 프로그램이나 타사 스크립트에 의해 삽입된 예상치 못한 요소를 적절하게 처리하여 수분 공급을 개선합니다.

리소스 미리 로드

preload 및 preinit와 같은 리소스 사전 로드 API를 사용하여 성능 최적화:

import { preload, preinit } from 'react-dom';
preinit('script.js', { as: 'script' });
preload('font.woff', { as: 'font' });

로그인 후 복사

업그레이드 방법

단계별 지침은 React 19 업그레이드 가이드(https://react.dev/blog/2024/12/05/react-19)를 따르세요. 주요 고려 사항은 다음과 같습니다.

주요 변경 사항(가이드에 설명되어 있음)

앱 호환성 테스트

React를 피어 종속성으로 사용하는 종속성을 업데이트합니다.

지금 시작하세요

npm을 통해 프로젝트를 React 19로 업그레이드하세요.

npm 설치 React@19 React-dom@19

이 새로운 기능과 모범 사례에 대한 더 깊은 통찰력을 얻으려면 공식 React 19 문서(https://react.dev/blog/2024/12/05/react-19)를 살펴보세요.

React 19는 개발자에게 동적이고 성능이 뛰어나며 액세스 가능한 애플리케이션을 만들기 위한 강력한 도구를 제공하는 도약을 의미합니다. 오늘 탐험을 시작해 보세요!

위 내용은 React 안정 릴리스: 새로운 기능 및 업그레이드 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!