찾다

집 >웹 프론트엔드 >JS 튜토리얼 >반응해 보세요!

반응해 보세요!

DDD
DDD원래의
2024-12-08 11:23:111024검색

드디어!!

더 빠르고 직관적인 개발을 목표로 하는 일련의 변경 사항이 포함된 React 19가 출시되었습니다. 비동기 코드를 보다 자연스럽게 처리하는 새로운 API를 도입하고 개발자가 더 깔끔한 코드를 작성할 수 있도록 기존 도구를 개선합니다. 숙련된 사용자는 유용한 후크와 향상된 성능을 찾을 수 있고, 신규 사용자는 더 간단한 코드 패턴을 볼 수 있습니다.

여기에서 React에 대해 자세히 알아볼 수 있습니다: https://react.dev/blog/2024/12/05/react-19

React v19는 npm(https://www.npmjs.com/package/react)에서 사용할 수 있습니다

시작하려면: (지금 React v19 설치) 

npm i react

React 19는 비동기 작업, 서버 상호 작용 및 상태 관리 처리 시 발생하는 마찰을 줄입니다. 개발자는 복잡성에 얽매이지 않고 훌륭한 사용자 경험을 구축하는 데 집중할 수 있습니다.

React vis out!

React 19의 새로운 기능

작업 단순화

React 19에서는 전환 중에 비동기 기능을 처리하는 액션이라는 새로운 방법을 도입했습니다. 이러한 기능을 통해 React는 보류 상태, 오류 및 낙관적 업데이트를 자동으로 관리할 수 있습니다. Actions가 판도를 바꾸는 이유는 다음과 같습니다.

  • 자동 상태 관리: React는 백그라운드에서 보류 및 오류 상태를 처리하여 상용구 코드를 줄입니다.

  • UI 일관성: 오류가 발생하면 React는 UI를 원래 상태로 되돌려 원활한 사용자 경험을 보장합니다.

  • 향상된 양식 처리: 이제

    , 및

직관적인 상태 관리를 위한 새로운 후크

  1. useActionState
    • 비동기 작업 처리를 단순화합니다.
    • 현재 오류 상태, 제출 기능, 보류 상태를 반환합니다.
    • 코드를 더 깔끔하고 유지 관리하기 쉽게 만듭니다.
  2. 사용낙관적
    • 즉각적인 시각적 피드백을 위해 낙관적인 UI 업데이트를 활성화합니다.
    • 서버 응답을 기다리는 동안 사용자가 변경 사항을 즉시 확인할 수 있습니다.
    • 작업이 완료되면 자동으로 실제 상태로 되돌아갑니다.
  3. 사용양식상태
    • 하위 구성요소가 소품 드릴링 없이 상위 구성요소의 상태를 읽을 수 있도록 허용합니다.
    • 디자인 시스템이 더 적은 노력으로 양식 관련 상태를 관리할 수 있도록 도와줍니다.

React vis out!

이미지 출처: React.dev

향상된 React DOM 기능

  • 서버 측 렌더링 향상: React-dom/static의 새로운 prerender 및 prerenderToNodeStream API를 사용하면 최종 HTML을 생성하기 전에 데이터 로드가 가능합니다. 이렇게 하면 서버에서 렌더링된 콘텐츠를 클라이언트에서 즉시 볼 수 있습니다.
  • 향상된 양식 상태 액세스:useFormStatus는 여러 prop을 통해 양식 상태를 전달할 필요성을 제거하여 구성 요소 계층을 단순화합니다.

React 서버 구성요소의 발전

React 서버 구성 요소는 이제 안정 릴리스의 일부입니다. 이를 통해 개발자는 UI 코드와 서버 로직을 보다 원활하게 통합할 수 있습니다.

  • 서버 작업: "서버 사용"으로 정의되며 클라이언트 구성 요소가 서버측 기능을 쉽게 실행할 수 있도록 해줍니다. React는 서버-클라이언트 통신의 복잡성을 처리하여 개발을 더욱 간단하게 만듭니다.

기타 주목할 만한 개선 사항

React 19에는 유연성을 향상하고 개발을 단순화하기 위한 여러 업데이트가 도입되었습니다.

  • ref Prop: 함수 구성 요소는 이제 ref를 prop으로 직접 받아들일 수 있으므로 많은 경우에 ForwardRef의 필요성이 줄어듭니다.
  • 향상된 수화 오류 보고:수화 오류가 발생하면 React는 자세한 차이점을 제공하여 문제를 더 쉽게 디버깅하고 수정할 수 있습니다.
  • 공급자: 이제 개발자는 대신 공급자로 직접 렌더링하여 컨텍스트 사용을 간소화할 수 있습니다.
  • ref 콜백에 대한 정리 함수:Ref 콜백은 이제 정리 기능을 지원하므로 구성 요소가 마운트 해제될 때 더욱 정확한 리소스 관리가 가능합니다.

코드 샘플이 포함된 전체 기능 목록을 보려면 다음을 방문하세요.

  • https://react.dev/blog/2024/12/05/react-19
  • https://github.com/facebook/react/blob/main/CHANGELOG.md

React v18과 v19 사이에는 너무 오랜 시간이 걸렸습니다. 이러한 기능을 살펴보고 사람들이 무엇을 만들 것인지 알아봅시다.

읽어주셔서 감사합니다. 내 프로젝트에 대한 지원이 필요합니까 ??

저는 오픈소스 이력서 작성 플랫폼인 "Resume Matcher"를 구축하려고 노력해 왔습니다. GitHub에서 커뮤니티에 참여하고 커뮤니티를 구축하는 데 도움을 주시면 정말 감사하겠습니다. ? ?

React vis out!

GitHub: https://github.com/srbhr/Resume-Matcher
디스코드: https://discord.gg/t3Y9HEuV34

? GitHub의 이력서 일치자

그리고 이 게시물이 마음에 드셨다면. DEV에서 저를 팔로우해주세요, Saurabh?.

GitHub에서 나를 팔로우하세요

위 내용은 반응해 보세요!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

less html npm Static Resource if for while Error finally function dom this input github https ui Access Game Other
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：JavaScript를 사용하여 웹 페이지의 텍스트를 어떻게 강조할 수 있습니까?다음 기사：JavaScript를 사용하여 웹 페이지의 텍스트를 어떻게 강조할 수 있습니까?

관련 기사

더보기