반응해 보세요!-JS 튜토리얼-php.cn

반응해 보세요!

DDD

풀어 주다： 2024-12-08 11:23:11

원래의

1027명이 탐색했습니다.

드디어!!

더 빠르고 직관적인 개발을 목표로 하는 일련의 변경 사항이 포함된 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를 원래 상태로 되돌려 원활한 사용자 경험을 보장합니다.
향상된 양식 처리: 이제
, 및

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

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

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 콜백은 이제 정리 기능을 지원하므로 구성 요소가 마운트 해제될 때 더욱 정확한 리소스 관리가 가능합니다.

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